Скажем, у меня есть этот текст, который я хочу отобразить в ячейке таблицы HTML:
Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks
и я хочу, чтобы строка прерывалась предпочтительно после одной из запятых.
Есть ли способ показать рендереру HTML попробовать взломать в определенном месте и сделать это сначала, прежде чем пытаться сломать одно из пространств, не используя неразрывные пробелы? Если я используйте неразрывные пробелы, а затем делает ширину более безусловной. Я хочу, чтобы разрыв строки произошел после одного из пробелов, если алгоритм обертки строк попробовал его с запятыми и не смог получить строку.
Я попытался обернуть фрагменты текста в элементах <span>, но это, похоже, ничего не помогает.
<html>
<head>
<style type="text/css">
div.box { width: 180px; }
table, table td {
border: 1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="box">
<table>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>
<span>Honey Nut Cheerios,</span>
<span>Wheat Chex,</span>
<span>Grape-Nuts,</span>
<span>Rice Krispies,</span>
<span>Some random cereal with a very long name,</span>
<span>Honey Bunches of Oats,</span>
<span>Wheaties,</span>
<span>Special K,</span>
<span>Froot Loops,</span>
<span>Apple Jacks</span>
</td>
<td>lorem ipsum</td>
</tr>
</table>
</div>
</body>
</html>
Примечание. Похоже, что CSS3 text-wrap: avoid поведение - это то, что я хочу, но я не могу заставить его работать.
Используя
span.avoidwrap { display:inline-block; }
и обертывание текста, который я хочу сохранить вместе
<span class="avoidwrap"> Text </span>
он обернет сначала в предпочтительные блоки, а затем поменьше фрагментов по мере необходимости.
Там очень аккуратное RWD-решение от Dan Mall, которое я предпочитаю. Я собираюсь добавить это здесь, потому что некоторые другие вопросы, касающиеся гибких разрывов строк, помечены как дубликаты этого.
В вашем случае у вас будет:
<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>
И одна строка CSS в вашем медиа-запросе:
@media screen and (min-width: 768px) {
.rwd-break { display: none; }
}
Простым ответом является использование символа пробела с нулевой шириной ​ Он используется для создания разрывов внутри слов в определенных точках.
Существует ли полная противоположность неразрывного пространства (ну, на самом деле word-joiner ⁠) (word-joiner - ширина версии неразрывного пространства)
(существуют и другие не нарушающие коды, такие как неразрывный дефис ‑) (здесь приведен обширный ответ на разные "варианты" NBSP)
Если вы хотите использовать только HTML-версию (без CSS/JS), вы могли бы использовать комбинацию пространства с нулевой шириной и неразрывным пространством, однако это было бы очень грязно, и для написания удобочитаемой версии требуется немного усилий.
ctrl + c, ctrl + v помогает
Пример:
Honey Nut Cheerios,<!---->​<!--
-->Wheat Chex,<!---->​<!--
-->Grape‑Nuts,<!---->​<!--
-->Rice Krispies,<!---->​<!--
-->Some random cereal with a very long name,<!---->​<!--
-->Honey Bunches of Oats,<!---->​<!--
-->Wheaties,<!---->​<!--
-->Special K,<!---->​<!--
-->Froot Loops,<!---->​<!--
-->Apple Jacks
нечитаемым? это тот же HTML без тегов комментариев:
Honey Nut Cheerios,​Wheat Chex,​Grape‑Nuts,​Rice Krispies,​Some random cereal with a very long name,​Honey Bunches of Oats,​Wheaties,​Special K,​Froot Loops,​Apple Jacks
Однако, поскольку рендеринг HTML html не полностью стандартизирован, его полезно для такого использования, так как это решение не использует CSS/JS
Кроме того, если вы используете это в сочетании с любым из решений, основанных на <span>, вы получите полный контроль над алгоритмом прерывания строки
(редакционная заметка:)
Единственная проблема, с которой я мог столкнуться, - это если вы хотите динамически менять точки предпочтительного ломания. Это потребует постоянной JS-манипуляции с каждым пропорциональным размером пролета и необходимость обработки этих HTML-объектов в тексте.
Ответ - нет (вы не можете изменить используемый алгоритм разрыва строки).
Но есть некоторые обходные пути (лучший из них - принятый ответ)
Вы можете приблизиться к нерасширяющемуся пространству , но только между словами, которые идут вместе (что у вас есть в промежутках, но не после запятой), или вы можете использовать white-space:nowrap как @Marcel, упомянутый.
Оба решения делают то же самое, и оба будут не разбивать группу слов, если она не подходит сама по себе.
С вашей надписью выше используйте span { white-space:nowrap }. Это так хорошо, как вы можете ожидать действительно.
Новый ответ теперь у нас есть HTML5:
HTML5 представляет тег <wbr>. (Это означает Word Break Opportunity.)
Добавление <wbr> означает, что браузер прерывается там где-нибудь еще, поэтому легко разбить слова после запятых:
Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape-Nuts,<wbr> Rice Krispies,<wbr> Some random cereal with a very long name,<wbr> Honey Bunches of Oats,<wbr> Wheaties,<wbr> Special K,<wbr> Froot Loops,<wbr> Apple Jacks
Он поддерживает мои все основные браузеры, кроме IE.
Вы можете просто настроить параметры полей в CSS (в этом случае margin-right).
text {
margin-right: 20%;
}
Используйте <div> вместо <span> или укажите класс для SPAN и присвойте ему атрибут display: block.
Этот элемент HTML для этого ™: (теперь стандартизованный) <wbr> элемент.
Ид советуем вам использовать это. Он может не работать везде, но это лучшее, что вы можете сделать, не пройдя обручи.