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

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

97 голосов
/ 22 марта 2011

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

141 голосов
/ 11 апреля 2012

Используя 

span.avoidwrap { display:inline-block; }

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

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

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

17 голосов
/ 12 мая 2015

Мне очень нравится 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; }
}
4 голосов
/ 02 марта 2016

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

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

(есть и другие неразрывные коды, такие как неразрывный дефис &#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-сущности в тексте.

3 голосов
/ 22 марта 2011

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

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

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

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

2 голосов
/ 22 марта 2011

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

1 голос
/ 01 сентября 2013

Новый ответ теперь у нас есть HTML5:

HTML5 вводит тег <wbr>. (Это расшифровывается как Word Break Возможность.)

Добавление <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.

0 голосов
/ 15 августа 2018

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

text {
    margin-right: 20%;
}
0 голосов
/ 22 марта 2011

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

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

0 голосов
/ 22 марта 2011

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

...