тег - video html title




Как разбить слово на тире? (8)

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

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>

Как сделать так, чтобы строка оставалась ограниченной width 150 и просто переносилась на новую строку на дефисе?


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

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

Таким образом, если ваш код что-то вроде:

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

тогда ваш браузер покажет это без разрывов слов:

1111112222222-33333334444444-5555555

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

111111-
222222-
-333333
444444-
555555

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


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

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


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

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

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


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

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

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

Вот как это можно использовать в примере 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>


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

word-break:break-all;

ех.

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

выход:

abababababa
ababababbba
abbabbababa
ababb

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


Замените ваши дефисы на это:

&shy;

Это называется «мягкий» дефис.

div {
  width: 150px;
}
<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>


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

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


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

HTML Entity (десятичный)

&#8209;




text