Как разбить слово после специального символа, такого как дефис (-)

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

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

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

Ответов (11)

Решение

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

&shy;

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

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

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

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

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

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

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

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

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

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

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

HTML-объект (десятичный)

&#8209;

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

word-break:break-all;

бывший.

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

выход:

abababababa
ababababbba
abbabbababa
ababb

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

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

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

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

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

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

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

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

если вы хотите использовать разрыв строки перед дефисом &#8203;- .

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

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

<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&shy;222222&shy;-333333&#8203;444444-&#8203;555555

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

1111112222222-33333334444444-5555555

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

111111-
222222-
-333333
444444-
555555

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