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

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

­

Это называется дефисом "soft".

div {

  width: 150px;

}

<div>

  12333&shy;2333&shy;233&shy;23339392&shy;332332323

</div>

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

Чтобы процитировать эту ссылку:

Элемент 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>

Как часть 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

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

Сто одиннадцать тысяч сто одиннадцать-
Двести двадцать две тысячи двести двадцать два-
-333333
Четыреста сорок четыре тысячи четыреста сорок четыре-
Пятьсот пятьдесят пять тысяч пятьсот пятьдесят пять

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

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

word-break:break-all;

экс.

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

выход:

abababababa
ababababbba
abbabbababa
ababb

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

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

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

‑

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

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

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

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

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

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

div {

  width: 150px;

}

<div>

  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323

</div>

если вы хотите прервать строку перед дефисом, используйте вместо этого ​- .