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

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

цитата из этой ссылки:

Возможность Разрыва Слова (<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>

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

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

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

• работа при разбиении на слова, но когда не разбиение на слова Не отображать какие-либо дефисы, или

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

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

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

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

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

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

111111­222222­-333333​444444-​555555

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

1111112222222-33333334444444-5555555

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

111111-
222222-
-333333
444444-
555555

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

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

word-break:break-all;

ex.

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

выход:

abababababa
ababababbba
abbabbababa
ababb

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

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

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

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

HTML Entity (decimal)

‑

вместо - можно использовать ‐ или \u2010.

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

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

вы можете использовать пробел 0 ширины после символа дефиса:

div {
  width: 150px;
}

<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

Если вы хотите разрыв строки перед дефисом использовать ​- вместо.