Как разбить слово на тире?
https://stackoverflow.com/questions/904
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Учитывая относительно простой CSS:
div {
width: 150px;
}<div>
12333-2333-233-23339392-332332323
</div>Как мне сделать так, чтобы строка оставалась ограниченной width из 150, и просто переносит в новую строку через дефис?
Решение
Замените ваши дефисы на это:
­
Это называется "мягкий" дефис.
div {
width: 150px;
}<div>
12333­2333­233­23339392­332332323
</div>Другие советы
Во всех современных браузерах* (и в некоторых старые браузеры, тоже), тот <wbr> элемент это идеальный инструмент для предоставления возможности прерывать длинные слова в определенных местах.
Процитирую по этой ссылке:
Слово " Сломать Возможность " (
<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.Текст вырывается из поля размером 150 пикселей в 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.
Вы также можете использовать :
word-break:break-all;
бывший.
<div style='width:10px'>ababababababbabaabababababababbabababa</div>
выходной сигнал:
abababababa
ababababbba
abbabbababa
ababb
разрыв слова - это разрыв всего слова или строки, даже если в предложении нет пробелов, которые не соответствуют заданной ширине или высоте.гайка для этого у вас должна быть определенной ширины или высоты.
Неразрывный дефис работает хорошо.
HTML-объект (десятичный)
‑
Вместо того, чтобы - вы можете использовать ‐ или \u2010.
Кроме того, убедитесь, что дефисы свойство css было нет установлено значение Нет (Значение по умолчанию равно руководство пользователя).
<wbr> не поддерживается Internet Explorer ( Обозреватель Интернета).
Надеюсь, это может помочь
использование <br>(разрыв) отметьте место, где вы хотите разорвать строку.
Вы можете использовать пробел шириной 0 после символа дефиса:
div {
width: 150px;
}<div>
12333-​2333-​233-​23339392-​332332323
</div>если Вы хотите перевести строку перед дефисом, используйте ​- вместо этого.
