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

Question

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

div {
  width: 150px;
}

<div>
  12333-2333-233-23339392-332332323
</div>

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

Answer 1

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

­

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

div {
  width: 150px;
}

<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Answer 2

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

Answer 3

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

Answer 4

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

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

Answer 5

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

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

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

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

Answer 6

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

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

Таким образом, если ваш код выглядит примерно так:

111111­222222­-333333​444444-​555555

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

1111112222222-33333334444444-5555555

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

111111-
222222-
-333333
444444-
555555

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

Answer 7

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

word-break:break-all;

отл.

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

Выход:

abababababa
ababababbba
abbabbababa
ababb

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

Answer 8

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

div {
  width: 150px;
}

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

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

Answer 9

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

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

Answer 10

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

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

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