У меня есть куча очень длинных имен файлов, которые заставляют мое форматирование HTML переполняться. Все эти имена файлов используют символы подчеркивания вместо пробелов и легко ломаются/обертываются, если они являются пробелами. Вот так.
Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf
Есть ли способ сказать CSS для обработки символов подчеркивания в тексте, как если бы они были пробелами или дефисами, и, таким образом, обернуть/сломать на символах подчеркивания? Вот так.
Here_is_an_example_of_a_really_long_
file_name_that_uses_underscores_
instead_of_spaces.pdf
В моих целях я не могу использовать script для этого. Я также не хочу использовать трюк word-wrap: break-word, потому что это обычно не работает без указания ширины. Кроме того, он прерывается произвольно в середине слов.
Спасибо.
Вы можете использовать тег <wbr> (http://www.quirksmode.org/oddsandends/wbr.html), который позволяет обойти браузер, если вы его разместите.
Итак, ваш HTML должен быть:
Here_<wbr>is_<wbr>an_<wbr>example_<wbr>of_<wbr>a_<wbr>really_<wbr>...
Вы можете добавить этот тег на серверной стороне, прежде чем вывести HTML.
Альтернативой является сущность ​, которая является пространством нулевой ширины. Иногда это работает лучше в некоторых браузерах.
Использовать CSS
word-break: break-all
Кажется, вы не можете использовать CSS для этой цели в настоящее время.
Но вы можете использовать JavaScript для автоматического добавления тегов <wbr>, например:
var arr = document.getElementsByClassName('filename');
for(var i = 0; i < arr.length; i++) {
arr[i].innerHTML = arr[i].innerHTML.replace(/_/g, '_<wbr/>');
}body { width: 250px; }<a class="filename">Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf</a>Без использования JavaScript и <wbr> вы можете вставить <span> </span> (обратите внимание на пространство) со следующим CSS:
span{
width: 0;
overflow: hidden;
display: inline-block;
}
Разметка:
Here_<span> </span>is_<span> </span>an_<span> </span>example...