Display: встроенный блок не делает ширину как можно меньше с обернутым содержимым

У меня есть div котором есть inline-block и max-width, а также текстовое содержимое, которое может обернуться внутри. Моя проблема в том, что div всегда принимает максимально возможную ширину, но только если текст переносится. Я хочу, чтобы div занимал наименьшую возможную ширину в ответ на перенос текста.

div {
 
  max-width: 120px;
  width: auto;
  display: inline-block;

  border: 1px solid black;    
  padding: 0.2rem;
  
}

<div>Reallylongword test</div>

Ответ 1

От этот ответ в одном из ваших связанных вопросов: display: table-caption вместо inline-block делает то, что вы хотите.

div {
  max-width: 120px;
  width: auto;
  display: table-caption;

  border: 1px solid black;    
  padding: 0.2rem;
}

<div>Reallylongword test</div>

Ответ 2

Вы пытались использовать тег span. Это встроенный элемент и встроенные элементы являются такими же широкими, как и внутри него. После использования диапазона вы можете изменить отображение: встроенный блок для отображения: inline;

Я надеюсь, что это поможет

div {
 
  max-width: 120px;
  width: auto;
  display: inline;

  border: 1px solid black;    
  padding: 0.2rem;
  
}

<div><span>Reallylongword test</span></div>

Ответ 3

Это просто, как браузеры определяют размер элемента при переносе текста. То же самое происходит с ячейками таблицы. Если вы используете очень специфичны, статический контент вы могли бы поставить жесткий перерыв <br/>, где вы хотите текст обернуть. Это решает проблему, но оставляет ваш контент очень негибким. Однако, учитывая, что вы очень точно определяете размер своего контейнера, это может сработать для вас.

Можно ли будет увидеть ваш контент и дизайн, который вы пытаетесь достичь? Это помогло бы с предложением решений.

Ответ 4

Можете ли вы настроить значение max-width, как показано ниже?

div {
 
  max-width: 110px;
  width: auto;
  display: inline-block;

  border: 1px solid black;    
  padding: 0.2rem;
  
  
}

<div>Reallylongword test</div>

Ответ 5

Основываясь на ответе Фабиана выше, это является следствием того, как браузеры изменяют размеры элементов для обработки переноса слов. По этой причине я не верю, что чисто CSS-решение возможно. Тем не менее, вы можете динамически определить ширину и принудительно установить <div> на эту ширину:

var textWidth = $("div").textWidth();
$("div").width(textWidth);

Функция, которую я использую для вычисления textWidth, здесь.

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};

Здесь JSFiddle для демонстрации.

Ответ 6

Вам не нужно использовать max-width и вместо этого использовать <br/>

div {
  width: auto;
  display: inline-block;

  border: 1px solid black;    
  padding: 0.2rem;
  
}

<div>Reallylongword <br/> test</div>