Как слово-брейк на тире?

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

Ваш пример работает, как ожидается, в 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.

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

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

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

Вот как он может быть использован в примере Ора (или увидеть его в действии на 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 Entity (десятичное)

‑

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

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

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

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

word-break:break-all;

ех.

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

вывод:

abababababa
ababababbba
abbabbababa
ababb

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

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

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

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

div {
  width: 150px;
}

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

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