Как разбить слово на тире?
Учитывая относительно простой CSS:
div {
width: 150px;
}<div>
12333-2333-233-23339392-332332323
</div>Как сделать так, чтобы строка оставалась ограниченной width из 150, и просто переносится на новую строку на дефисе?
11 ответов
Замените ваши дефисы на это:
­
Это называется "мягкий" дефис.
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, & shy; и & # 8203; ни один из которых полностью не поддерживается.
В этом конкретном случае (где ваша строка будет содержать дефисы), я бы преобразовал текст на стороне сервера:
<div style="width:150px;">
<span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>Ваш пример работает должным образом в Google Chrome, Safari (Windows) и IE8. Текст вырывается из окна 150px в Firefox 3 и Opera 9.5.
Дополнительно ­ не подойдет для вашего примера, так как будет:
работать, когда ломается слово, но когда не ломается слово, не отображаются дефисы, или
работать, когда не разрывается слово, но отображать два дефиса, когда разрывается слово, так как это добавляет дефис на разрыв.
В зависимости от того, что вы хотите увидеть точно, вы можете использовать комбинацию hyphen, soft hyphenи / или zero width space,
На мягком дефисе ваш браузер может разбивать слова (добавляя дефис). В пространстве с нулевой шириной ваш браузер может разбивать слова (без добавления чего-либо).
Таким образом, если ваш код что-то вроде:
111111­222222­-333333​444444-​555555
тогда ваш браузер покажет это без разбивки слов:
1111112222222-33333334444444-5555555
и это будет всевозможным разрывом слов:
111111-
222222-
-333333
444444-
555555
Просто выберите нужный вам вариант. В вашем случае это может быть интервал от 4 до 5 секунд.
Вы также можете использовать:
word-break:break-all;
ех.
<div style='width:10px'>ababababababbabaabababababababbabababa</div>
выход:
abababababa
ababababbba
abbabbababa
ababb
разрыв слова - это разрыв слова или строки, даже если в предложении нет пробела, который не соответствует заданной ширине или высоте. Гайкой для этого вам необходимо предоставить ширину или высоту.
Надеюсь, что это может помочь
использование <br>(разрыв) тег, где вы хотите, чтобы разорвать линию.
Вместо - ты можешь использовать ‐ или же \u2010,
Кроме того, убедитесь, что для свойства дефиса css не задано значение none (значение по умолчанию - вручную).
<wbr> Internet Explorer не поддерживается.
Вы можете использовать 0 ширины пробела после дефиса:
div {
width: 150px;
}<div>
12333-​2333-​233-​23339392-​332332323
</div>если вы хотите разрыв строки перед использованием дефиса ​- вместо.
Неразрывный дефис работает хорошо.
HTML Entity (десятичный)
‑