Как сломать паузу на тире?

Учитывая относительно простой CSS:

div {
  width: 150px;
}

<div>
  12333-2333-233-23339392-332332323
</div>

Ответы

Ответ 1

Замените свои дефисы следующим образом:

&shy;

Он называется "мягким" дефем.

div {
  width: 150px;
}

<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Ответ 2

Во всех современных браузерах ^* (и в некоторых более старых браузерах), <wbr> element - идеальный инструмент для предоставления возможности сломать длинные слова в определенных точках.

Процитировать по этой ссылке:

Элемент Word Break Opportunity (<wbr>) HTML представляет собой позицию в тексте, где браузер может произвольно разорвать строку, хотя ее правила прерывания не создавали бы иначе разрыв в этом месте.

Вот как это можно использовать в примере OP (или увидеть его в действии на JSFiddle):

<div style="width: 150px;">
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

^* Я тестировал его в IE9, IE10 и последних версиях Chrome, Firefox и Opera и Safari.

div {
  width: 150px;
}

<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

Ответ 3

Как часть CSS3, он еще не полностью поддерживается, но здесь вы можете найти информацию о переносе слов. Другим вариантом является wbr tag, & shy;, и & # 8203; ни один из которых не поддерживается полностью.

Ответ 4

Ваш пример работает в Google Chrome, Safari (Windows) и IE8. Текст выходит из поля 150px в Firefox 3 и Opera 9.5.

Дополнительно  не будет работать для вашего примера, так как он будет либо:

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

Ответ 5

В этом конкретном экземпляре (где ваша строка будет содержать дефисы) я бы преобразовал текст на эту серверную сторону:

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>

Ответ 6

В зависимости от того, что вы хотите точно увидеть, вы можете использовать комбинацию hyphen, soft hyphen и/или zero width space.

На мягкой дефис ваш браузер может сломать слово (добавив дефис). На пространстве с нулевой шириной ваш браузер может сломать слово (без добавления чего-либо).

Таким образом, если ваш код выглядит примерно так:

111111222222-333333444444-555555

то ваш браузер покажет это без прерывания слова:

1111112222222-33333334444444-5555555

и это будет каждый возможный разрыв слова:

111111-
222222-
-333333
444444-
555555

Просто выберите нужный вариант. В вашем случае это может быть значение между 4 и 5 сек.

Ответ 7

Вы также можете использовать:

word-break:break-all;

ех.

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

выход:

abababababa
ababababbba
abbabbababa
ababb

word-break разбивает все слово или строку, даже если в предложении нет пробела, а не в ширине или высоте. гайка для этого вы должны обеспечить ширину или высоту.

Ответ 8

Надеюсь, это поможет

используйте тег <br> (break), где вы хотите разбить строку.

Ответ 9

Непрерывный дефис работает хорошо.

HTML-сущность (десятичная)

&#8209;

Ответ 10

Вместо - вы можете использовать &hyphen; или \u2010.

Кроме того, убедитесь, что свойство дефис css было не установлено на none (значение по умолчанию - вручную).

<wbr> не поддерживается Internet Explorer.