Растянуть столбцы bootstrap3 по содержимому

Question

В моем проекте есть поле для ввода текста и две кнопки. Содержимое одной из кнопок генерируется динамически, и иногда возникает ОЧЕНЬ ДЛИННОЕ СОДЕРЖАНИЕ. Проблема в том, что кнопка с длинным содержимым выходит за пределы своих границ.
Как сделать так, чтобы ширина столбцов подбиралась динамически, в зависимости от содержимого?
Bootstrap версия 3.4.1

<div class="row">
  <div class="col-xs-10">
    <div class="hidden">
      <input type="hidden" class="form-control">
      <p class="help-block help-block-error"></p>
    </div>
    <div class="form-group">
      <input type="text" class="form-control">
      <p class="help-block help-block-error"></p>
    </div>
  </div>
  <div class="col-xs-1">
    <button type="submit" class="btn btn-primary">VERY LONG CONTENT</button>
  </div>
  <div class="col-xs-1">
    <button type="button" class="btn">Очистить</button>
  </div>
</div>

Answer 1

Если вы не хотите использовать переполнение, вы можете изменить макет с помощью пользовательских классов. Поскольку bootstrap 3 не поддерживает автоматические столбцы, у вас не так много вариантов. Я бы предложил использовать bootstrap 4 или изменить макет с помощью flexbox.

Я создал это jsfiddle с простым решением.

Вы можете определить выравнивание элементов, используя justify-content и flex, чтобы установить их размеры.

CSS:

.row-flex {
  display: flex;
  justify-content: space-between;
}

.input-group {
  flex: 1;
  margin-right: 10px;
}

Answer 2

попробуйте это:

.btn-primary {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   word-break: break-all; 
}

Полезный код.

Answer 3

Попробуйте следующим образом:

button {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

может быть полезным.