html (+css): обозначение предпочтительного места для разрыва строки
допустим, у меня есть этот текст, который я хочу отобразить в ячейке таблицы 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 поведение - это то, что я хочу, но я не могу заставить его работать.
9 ответов:
С помощью
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; } }
ответа нет (вы не можете изменить алгоритм разрыва строки, используемый).
но есть некоторые обходные пути (безопасность принято отвечать)
вы можете пойти рядом с неразрывным пространством
но только между словами, которые идут вместе (что у вас есть в промежутках, но не после запятой ), или вы можете использоватьwhite-space:nowrapкак упоминал @ Marcel.оба решения делают то же самое, и оба будут не разбить группу слов, если она не подходит по-своему.
С вашей наценкой выше использовать
span { white-space:nowrap }. Это так хорошо, как вы можете ожидать.
новый ответ, теперь у нас есть HTML5:
HTML5 предоставляет
<wbr>тег. (Это означает возможность разрыва слова.)добавлять
<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.
простой ответ заключается в использовании символ пробела нулевой ширины
​Он используется для изготовления breakspaces внутри слов в определенных точках.тут противоположность на неразрывный пробел
(ну, на самом деле слово-столяр⁠) (слово-столяр это версия нулевой ширины неразрывный пробел)(есть и другие, не ломая коды вроде неразрывный дефис
‑)(вот обширный ответ на различные "варианты"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 рендеринга не полностью стандартизирована, его хорошо для такого рода использования, так как это решение использует нет CSS / JS
также, если вы используете это в сочетании с любым из
<span>на основе решений, вы будете иметь полный контроль над алгоритм разбиения строк(редакционное Примечание:)
единственная проблема, которую я мог видеть у вас есть, если вы хотите изменить точки предпочтительного обрыва динамически. Это потребует постоянной JS-манипуляции с каждым из диапазонов пропорционального размера и необходимости обрабатывать эти HTML-объекты в тексте.
вы можете просто настроить параметры поля в CSS (margin-right в этом случае).
text { margin-right: 20%; }
для этого есть HTML-элемент™:the (теперь стандартизированный)
<wbr>элемент.Я бы посоветовал вам использовать это. Это может не сработать везде, но это лучшее, что вы можете сделать, минуя обручи.
Comments