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

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

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

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

4.08.2008 00:17:34
Это сработало для вас? я попробовал это в Firefox, и он полностью удаляет дефис ...
Chris Marasti-Georg 16.10.2008 17:53:11
«это» означает исправление
Chris Marasti-Georg 16.10.2008 17:54:35
@ ChrisMarasti-Georg: Есть шесть исправлений, которые я печатаю.
hippietrail 22.11.2012 10:39:27
vsync 5.10.2016 14:54:55
11 ОТВЕТОВ
РЕШЕНИЕ

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

&shy;

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

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

68
30.11.2016 09:06:55
... и он не будет отображаться на дисплее, пока не произойдет настоящий разрыв. Так что это не хорошо, если вы всегда хотите, чтобы дефис отображался.
Chris Marasti-Georg 20.10.2008 22:02:07
Мне было интересно о совместимости браузера &shy;. Согласно Quirksmode (см. Таблицу совместимости), это хорошо, с единственными проблемами, возникающими в старых браузерах, таких как FF2 и IE5.5-6.
evanrmurphy 23.10.2012 21:05:04

Во всех современных браузерах * (и в некоторых старых браузерах тоже) этот <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>

32
30.11.2016 08:39:27

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

17
10.07.2014 21:33:00
Поскольку запись word-wrap: break-word;не ломается в дефисе в Firefox (протестировано в v11)
Tim Abell 11.04.2012 15:47:07

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

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

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

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

8
15.09.2008 23:28:33

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

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

8
6.09.2018 21:00:25
Это не должно иметь значение, верно? Или, если вы не наденете эти промежутки на Nowrap.
Zorf 8.06.2010 02:19:33

В зависимости от того, что вы хотите видеть точно, вы можете использовать комбинацию 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 секунд.

7
28.03.2014 15:38:09
Остерегайтесь несовместимости браузера. См. Таблицу совместимости здесь: quirksmode.org/oddsandends/wbr.html
Tim Abell 11.04.2012 15:50:22
Просто примечание, &shy;безусловно, лучший вариант здесь. Все остальные, например, нарушают кернинг текста шрифта.
Marius 15.05.2017 13:01:38

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

word-break:break-all;

ех.

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

вывод:

abababababa
ababababbba
abbabbababa
ababb

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

2
27.08.2015 12:40:39

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

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

&#8209;
0
21.03.2014 22:09:57

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

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

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

0
14.05.2015 04:29:27

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

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

0
31.08.2017 10:53:47

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

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

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

0
13.09.2018 10:21:04