html (+ css): обозначает предпочтительное место для переноса строки

109

Допустим, у меня есть этот текст, который я хочу отобразить в ячейке таблицы 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 - это то, что я хочу, но я не могу заставить его работать.

Джейсон С
источник
внутри пролетов можно использовать неразрывные пробелы .
Габриэле Петриоли,
3
Но я не хочу , чтобы использовать не являющиеся разрушающие пространства. Я бы хотел использовать пробелы «не хочу-здесь-но-я-буду-если-придется», но, насколько мне известно, они существуют.
Jason S
@ Джейсон .. я чувствую тебя .. но это невозможно .. добавил ответ.
Габриэле Петриоли,
Драт, вот что происходит, когда компьютерные ученые пишут алгоритмы рендеринга без ввода типографов.
Jason S
1
вам следует принять ответ от @ EggertJóhannesson, поскольку он дает хорошее решение!
Габриэле Петриоли

Ответы:

156

Используя

span.avoidwrap { display:inline-block; }

и оборачивая текст, который я хочу сохранить вместе

<span class="avoidwrap"> Text </span>

сначала он будет заключен в предпочтительные блоки, а затем, по мере необходимости, на более мелкие фрагменты.

Эггерт Йоханнессон
источник
16
Прекрасно работает! Еще одно замечание: пробелы в начале и в конце строчного блока игнорируются, поэтому для разделения текста в блоках пробелом вам нужно поместить его между строчными блоками. Например, если интервалы были стилизованы под встроенные блоки, тогда <span>Hello </span><span> world</span>будет Helloworldи <span>Hello</span> <span>world</span>будет нормально Hello world.
пользователь
2
<wbr> более семантичен и оставляет контроль в браузере, что в целом хорошо. В этом случае это делает возможным аварийное отключение.
Lodewijk
Отлично работает - когда важно, чтобы символы вроде "-" не ломались. Пример: Перикл <span class = "escapewrap"> (um & nbsp; 500-429 & nbsp; v.Chr.) </span>
Сара
10
@Lodewijk: <wbr>не указывает предпочтительное место для разрыва строки, но возможное .
Дэн Даскалеску 09
1
Обратите внимание, что этот метод работает и для вложенных <span>s, так что вы можете (по сути) указать иерархию предпочтительных точек останова.
Майкл Дайк
24

Я предпочитаю очень изящное 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; }
}
Стефан Вайнхольд
источник
7

Простой ответ - использовать символ пробела нулевой ширины. &#8203; Он используется для создания пробелов внутри слов в определенных точках .

Имеет ли полная противоположность в неразрывном пробеле &nbsp; (ну, на самом деле слово-столяр &#8288; ) ( слово-краснодеревщик является нулевой шириной версии неразрывного пробела )

(есть также другие неразрывные коды, такие как неразрывный дефис &#8209; ) (вот подробный ответ на различные «варианты» nbsp )

Если вам нужно решение только для HTML (без CSS / JS), вы можете использовать комбинацию пространства нулевой ширины и неразрывного пространства , однако это будет действительно беспорядочно , и написание версии, удобочитаемой человеком, требует небольших усилий. .

ctrl+ c, ctrl+ vпомогает

пример:

   Honey&nbsp;Nut&nbsp;Cheerios,<!---->&#8203;<!--
-->Wheat&nbsp;Chex,<!---->&#8203;<!--
-->Grape&#8209;Nuts,<!---->&#8203;<!--
-->Rice&nbsp;Krispies,<!---->&#8203;<!--
-->Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,<!---->&#8203;<!--
-->Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,<!---->&#8203;<!--
-->Wheaties,<!---->&#8203;<!--
-->Special&nbsp;K,<!---->&#8203;<!--
-->Froot&nbsp;Loops,<!---->&#8203;<!--
-->Apple&nbsp;Jacks

нечитаемый? это тот же HTML без тегов комментариев:

   Honey&nbsp;Nut&nbsp;Cheerios,&#8203;Wheat&nbsp;Chex,&#8203;Grape&#8209;Nuts,&#8203;Rice&nbsp;Krispies,&#8203;Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,&#8203;Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,&#8203;Wheaties,&#8203;Special&nbsp;K,&#8203;Froot&nbsp;Loops,&#8203;Apple&nbsp;Jacks

Однако, поскольку рендеринг HTML в электронной почте не полностью стандартизирован, он хорош для такого рода использования, поскольку это решение не использует CSS / JS.

Кроме того, если вы используете это в сочетании с любым из <span>решений на основе, у вас будет полный контроль над алгоритмом разрыва строки.

(примечание редакции :)

Единственная проблема, которую я видел у вас, - это то, хотите ли вы динамически изменять точки предпочтительного разрушения. Это потребовало бы постоянных JS-манипуляций с каждым из пропорциональных размеров промежутков и необходимости обрабатывать эти HTML-объекты в тексте.

Сообщество
источник
1
что такое span hacks?
Jason S
Другие ответы, использующие теги span.
Я также хочу отметить, что, хотя это решение не кажется самым простым, оно является наиболее надежным, поскольку эти сущности не изменяют и не должны часто изменять семантическое представление в браузерах, парсерах электронной почты или любом другом парсере HTML.
3

Ответ - нет ( вы не можете изменить используемый алгоритм разрыва строки ).

Но есть некоторые обходные пути ( лучший из них - принятый ответ )

Вы можете использовать неразрывный пробел, &nbsp;но только между словами, которые идут вместе ( то, что у вас есть в промежутках, но не после запятой ), или вы можете использовать white-space:nowrapкак @Marcel, упомянутый.

Оба решения делают одно и то же, и оба не разбивают группу слов, если она не умещается сама по себе.

Габриэле Петриоли
источник
ах. :-( это воняет, это означает, что мне либо придется смириться с этим, либо мне нужно попытаться обнаружить длинные строки самостоятельно в попытке обойти алгоритм разрыва строки.
Джейсон С.
Я отредактировал ваш ответ, чтобы дать ссылку на обходной путь, так как я почти не продолжал читать из-за того, как сформулирована ваша первая строка.
arootbeer
@arootbeer: Я поддерживаю ваше изменение, но Габи отменила его. Габи: почему? Хотите ввести пользователей в заблуждение?
Дэн Даскалеску 09
@DanDascalescu, если все ответы должны быть изменены, чтобы указывать на принятый на той же странице? Мой ответ имеет 1 ( сумма ) голосов, и есть принятый ответ с 48 голосами. Я почти уверен, что принятый - тот, который привлекает внимание ( и это правильно ). Кроме того, я настаиваю на том, что нет способа изменить используемый алгоритм взлома ( как просит ОП )
Габриэле Петриоли,
1
проверьте, что мое решение использует вашу собственную логику против вас. объедините это с любым из решений диапазона, тогда у вас будет полный контроль над алгоритмом разрыва строки
2

С вашей наценкой выше используйте span { white-space:nowrap }. Это настолько хорошо, насколько вы действительно можете ожидать.

завивать волосы щипцами
источник
Спасибо, но это не сработает, потому что он в основном переводит пробелы в spanэлементе &nbsp;и предотвращает их разрушение. Я просто хочу отговорить средство визуализации от прерывания между одним из моих элементов, но, если это необходимо, я хочу, чтобы он это сделал.
Jason S
@Jason S: Я добавил к своему ответу другие варианты.
Марсель
как это по &nbsp;<wbr>-другому , чем в пространстве? Насколько я могу судить, возможны следующие варианты: разрешает ли данный персонаж перерыв или нет. Таким образом, '-' и '' и &#8203;и <wbr>и &shy;все разрешают разрыв (печать дефиса, пробела, ничего, ничего и дефис только на разрыв, соответственно), тогда как &nbsp;этого не происходит.
Jason S
@Jason S: Добавлен пример использования.
Марсель
Я просто попробовал, и, похоже, он не имеет приоритета над пробелами для разрыва строки. В приоритете то, что мне нужно. Если поведение взлома для другого символа или элемента либо да, либо нет, то моя проблема не имеет решения. Если есть относительные приоритеты разрыва строки, то у меня может быть решение.
Jason S
1

Новый ответ теперь у нас есть 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.

ACarter
источник
12
-1. Почему вы не тестировали перед советом? Не работает. <wbr>имеет другую цель. Не говоря уже о том, что этот ответ - дубликат ответа , существовавшего задолго до этого.
пользователь
1
У WBR нет другой цели. developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
Лодевийк,
13
<wbr>просто создает возможность для перерыва; он не «говорит браузеру, что нужно прерваться раньше, чем где-либо еще». Используемый перед пробелом, он обычно бесполезен, поскольку пробелы обычно являются возможностью разрыва строки.
Юкка К. Корпела
5
Это вообще не работает ни в одном браузере. Ответ неверен: разрыв строки <wbr>не имеет приоритета над обычными пробелами. Таким образом, упаковка в этом примере происходит как обычно.
Адриан
3
Чтобы уточнить, <wbr> предназначен для обозначения того, что «вот место, где вы можете сломать», когда в противном случае эта позиция считалась бы внутри слова . В нем говорится: «относитесь к месту между этими двумя персонажами так, как если бы там было пробел», а не «предпочитайте разрыв здесь». Если пробел уже есть, <wbr> не имеет значения.
Точка с запятой
-1

Вы можете просто настроить параметры полей в CSS (в данном случае margin-right).

text {
    margin-right: 20%;
}
тупица
источник
-3

Используйте <div>вместо <span>или укажите класс для SPAN и присвойте ему атрибут display: block .

Justacoder
источник
-5

Для этого есть HTML-элемент ™: (теперь стандартизованный) <wbr>элемент .

Я бы посоветовал вам воспользоваться этим. Возможно, это не сработает везде , но это лучшее, что вы можете сделать, не прибегая к обручам.

Матиас Байненс
источник
3
-1: <wbr>для обозначения точек останова в очень длинных словах, он не решает проблему с предпочтительными переносами строк
пользователь
4
@ user3075942 Прямая цитата из спецификации : « wbrЭлемент представляет собой возможность разрыва строки». Это именно то , о чем просил OP. Прекратите голосовать против людей на основании того, что вы читаете в вики.
Mathias Bynens
3
Да, возможность . Но у браузеров уже есть возможность разбивать пробелы. Вопрос в том, как указать браузеру, на каких пробелах лучше ломаться.
пользователь
1
… И ответ - использовать <wbr>.
Матиас Биненс
8
Нет, это не ответ. Это не увеличивает вероятность использования определенной ранее существовавшей точки останова; он только добавляет возможность новой точки останова, если она еще не существует. Наличие двух возможностей подряд бесполезно. developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
Торин Финнеманн