#html #css
Вопрос:
У меня есть inline-block контейнер, содержащий плавающий div и некоторый текст, который должен обертываться вокруг плавающего div. Однако ширина контейнера, по-видимому, определяется длиной первой строки, вплоть до первого разрыва строки. Каждая строка текста после этого больше никогда не увеличивает ширину контейнера.
Теперь, когда я либо меняю контейнер на display: block плавающий div, либо удаляю его, все работает так, как ожидалось. Контейнер просто растет вместе с текстом по мере необходимости. Но как только оба условия будут выполнены, контейнер просто не превысит ширину первой строки текста.
Вот простой пример:
HTML:
<div class="container">
<div class="float"></div>
Lorem ipsum<br>Lorem ipsum dolor sit amet
</div>
CSS:
.container {
border: 1px solid red;
display: inline-block;
}
.float {
background-color: #000;
width: 60px;
height: 60px;
float: left;
}
Вот краткое описание проблемы:
https://jsfiddle.net/ckLvqhex/
И вот краткое описание того, чего я пытаюсь достичь, за исключением того, что контейнер здесь есть display: block и, следовательно, не сжимается, чтобы соответствовать содержимому:
https://jsfiddle.net/ckLvqhex/1/
Как мне достичь желаемого результата?
Редактировать
Я добавил ползунок в свой пример скрипки JS, чтобы изменить ширину плавающего div. Это показывает, что по мере увеличения ширины контейнер сначала не увеличивается, а вместо этого просто переносит вторую строку текста. Таким образом, плавающий div просто занимает больше ширины контейнера, но не увеличивает его общую ширину.
Но: Как только «достигнут» конец первой строки, контейнер больше не сжимает текст и вместо этого просто начинает увеличивать свою общую ширину.
Убедитесь сами: https://jsfiddle.net/av6egboj/
Это дополнительно иллюстрируется в этой модифицированной скрипке JS, где первая строка текста самая длинная. Независимо от того, насколько изменится ширина плавающего div, текст никогда не будет завернут. Это ожидаемое поведение.
https://jsfiddle.net/p4hamtbe/
Так почему же эта проблема возникает только тогда, когда первая строка текста не является самой длинной строкой текста?
Комментарии:
1. используйте dispaly:таблица
2. @Temani Afif: Все еще неправильно обертывает текст.
3. Ширина не определяется первой строкой. Это определяется самой длинной линией, до доступной ширины от контейнера, как если бы поплавка там не было. Поэтому, когда поплавок ненулевой ширины включен, часть текста из самой длинной строки, предполагая, что она примыкает к поплавку (и, возможно, к другим строкам), будет перенесена. Сказав это, я не думаю, что в CSS есть какой-либо способ достичь того, чего вы хотите.
4. @Alohci: Значит, плавающий ненулевой блочный элемент внутри контейнера встроенного блока не влияет на ширину контейнера? Это просто своего рода … Съедает по ширине? Странные вещи.
5. @Alohci Я только что обновил свой вопрос двумя дополнительными примерами, в которых можно изменить ширину плавающего div. Длина первой строки определенно играет определенную роль, потому что первая строка никогда не завершается.
Ответ №1:
Чтобы остановить перенос текста, вы можете использовать свойство css: white-space: nowrap . Однако это приведет к тому, что текст будет расширяться за пределы div, а не к тому, что div расширится, чтобы соответствовать тексту. Это связано с использованием
width: 60px;
height: 60px;
Удаляя их, div отлично работает, но удаляет черный div сбоку.
Вот тут-то я и запутался. Если дело в том, чтобы иметь черный div слева, то использования простого html с загрузочной системой сетки более чем достаточно:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="cssSO.css" />
</head>
<body>
<div class="container" style="display: inline-block;">
<div class="test row" style="width: fit-content; height: fit-content;">
<div class="col-2 float" style="background-color: black;"></div>
<div class="col-10" style="white-space: nowrap;">
Lorem ipsum<br>Lorem ipsum dolor sit amet
</div>
</div>
</div>
</body>
</html>
С помощью этого css:
.test {
border: 1px solid red;
}
Это даст вам ожидаемый результат, который вы представили при использовании свойства встроенного блока.
Однако, учитывая, что это фиктивный пример, я, возможно, полностью упускаю вашу мысль, и в этом случае единственный мой совет-избегать использования ширины и высоты для создания столбцов div и вместо этого использовать bootstrap или аналогичные свойства.
Комментарии:
1. Извините, но сетка начальной загрузки кажется излишне сложной для того, чего я пытаюсь достичь. Содержимое состоит из div фиксированного размера (отсюда поле шириной и высотой 60 пикселей) и текста, который должен нормально обтекать его.
2. тогда почему бы вам просто не установить ширину contianer так, чтобы она точно соответствовала содержимому? Я не думаю, что есть способ сделать размер div относительно cotent, когда вы устанавливаете точные размеры для одного из дивов внутри него
3. @ Miss Skooter: В моем оригинальном примере размер div связан с содержимым, хотя текст просто обертывается неожиданным образом. Это именно то, для чего предназначен дисплей: встроенный блок, нет?
4. это честно говоря, не могу с этим поспорить. Однако, похоже, проблема во всем, что я пробовал, заключается в ширине и высоте 60 пикселей, и она всегда работает правильно, когда я их удаляю :/