Допустим, у меня есть этот текст, который я хочу отобразить в ячейке таблицы 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>примечание: похоже, поведение CSS3text-wrap: avoid - это то, что я хочу, но я не могу заставить его работать.
Ответы:
Используя
и оборачивая текст, который я хочу сохранить вместе
сначала он будет заключен в предпочтительные блоки, а затем, по мере необходимости, на более мелкие фрагменты.
источник
<span>Hello </span><span> world</span>будетHelloworldи<span>Hello</span> <span>world</span>будет нормальноHello world.<wbr>не указывает предпочтительное место для разрыва строки, но возможное .<span>s, так что вы можете (по сути) указать иерархию предпочтительных точек останова.Я предпочитаю очень изящное RWD-решение от Dan Mall . Я собираюсь добавить его сюда, потому что некоторые другие вопросы, касающиеся адаптивных разрывов строк, помечены как дубликаты этого.
В вашем случае у вас будет:
И одна строка CSS в вашем медиа-запросе:
источник
Простой ответ - использовать символ пробела нулевой ширины.
​Он используется для создания пробелов внутри слов в определенных точках .Имеет ли полная противоположность в неразрывном пробеле
(ну, на самом деле слово-столяр⁠) ( слово-краснодеревщик является нулевой шириной версии неразрывного пробела )(есть также другие неразрывные коды, такие как неразрывный дефис
‑) (вот подробный ответ на различные «варианты» nbsp )Если вам нужно решение только для HTML (без CSS / JS), вы можете использовать комбинацию пространства нулевой ширины и неразрывного пространства , однако это будет действительно беспорядочно , и написание версии, удобочитаемой человеком, требует небольших усилий. .
ctrl+ c, ctrl+ vпомогает
пример:
нечитаемый? это тот же HTML без тегов комментариев:
Однако, поскольку рендеринг HTML в электронной почте не полностью стандартизирован, он хорош для такого рода использования, поскольку это решение не использует CSS / JS.
Кроме того, если вы используете это в сочетании с любым из
<span>решений на основе, у вас будет полный контроль над алгоритмом разрыва строки.(примечание редакции :)
Единственная проблема, которую я видел у вас, - это то, хотите ли вы динамически изменять точки предпочтительного разрушения. Это потребовало бы постоянных JS-манипуляций с каждым из пропорциональных размеров промежутков и необходимости обрабатывать эти HTML-объекты в тексте.
источник
Ответ - нет ( вы не можете изменить используемый алгоритм разрыва строки ).
Но есть некоторые обходные пути ( лучший из них - принятый ответ )
Вы можете использовать неразрывный пробел,
но только между словами, которые идут вместе ( то, что у вас есть в промежутках, но не после запятой ), или вы можете использоватьwhite-space:nowrapкак @Marcel, упомянутый.Оба решения делают одно и то же, и оба не разбивают группу слов, если она не умещается сама по себе.
источник
С вашей наценкой выше используйте
span { white-space:nowrap }. Это настолько хорошо, насколько вы действительно можете ожидать.источник
spanэлементе и предотвращает их разрушение. Я просто хочу отговорить средство визуализации от прерывания между одним из моих элементов, но, если это необходимо, я хочу, чтобы он это сделал. <wbr>-другому , чем в пространстве? Насколько я могу судить, возможны следующие варианты: разрешает ли данный персонаж перерыв или нет. Таким образом, '-' и '' и​и<wbr>и­все разрешают разрыв (печать дефиса, пробела, ничего, ничего и дефис только на разрыв, соответственно), тогда как этого не происходит.Новый ответ теперь у нас есть HTML5:
HTML5 представляет
<wbr>тег. (Это означает возможность разрыва слова.)Добавление символа
<wbr>говорит браузеру, что нужно прерывать это слово раньше, чем где-либо еще, поэтому слова после запятых легко разбить:Он поддерживается всеми моими основными браузерами, кроме IE.
источник
<wbr>имеет другую цель. Не говоря уже о том, что этот ответ - дубликат ответа , существовавшего задолго до этого.<wbr>просто создает возможность для перерыва; он не «говорит браузеру, что нужно прерваться раньше, чем где-либо еще». Используемый перед пробелом, он обычно бесполезен, поскольку пробелы обычно являются возможностью разрыва строки.<wbr>не имеет приоритета над обычными пробелами. Таким образом, упаковка в этом примере происходит как обычно.Вы можете просто настроить параметры полей в CSS (в данном случае margin-right).
источник
Используйте
<div>вместо<span>или укажите класс для SPAN и присвойте ему атрибут display: block .источник
Для этого есть HTML-элемент ™: (теперь стандартизованный)
<wbr>элемент .Я бы посоветовал вам воспользоваться этим. Возможно, это не сработает везде , но это лучшее, что вы можете сделать, не прибегая к обручам.
источник
<wbr>для обозначения точек останова в очень длинных словах, он не решает проблему с предпочтительными переносами строкwbrЭлемент представляет собой возможность разрыва строки». Это именно то , о чем просил OP. Прекратите голосовать против людей на основании того, что вы читаете в вики.<wbr>.