Прерывание слова CSS/прерывание строки на символах подчеркивания в дополнение к пробелам и дефисам

У меня есть куча очень длинных имен файлов, которые заставляют мое форматирование 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, потому что это обычно не работает без указания ширины. Кроме того, он прерывается произвольно в середине слов.

Спасибо.

Ответ 1

Вы можете использовать тег  (http://www.quirksmode.org/oddsandends/wbr.html), который позволяет обойти браузер, если вы его разместите.

Итак, ваш HTML должен быть:

Here_<wbr>is_<wbr>an_<wbr>example_<wbr>of_<wbr>a_<wbr>really_<wbr>...

Вы можете добавить этот тег на серверной стороне, прежде чем вывести HTML.

Альтернативой является сущность , которая является пространством нулевой ширины. Иногда это работает лучше в некоторых браузерах.

Ответ 2

Использовать CSS

word-break: break-all

jsfiddle - код, result

Ответ 3

Кажется, вы не можете использовать CSS для этой цели в настоящее время.

Но вы можете использовать JavaScript для автоматического добавления тегов , например:

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>

Ответ 4

Без использования JavaScript и  вы можете вставить   (обратите внимание на пространство) со следующим CSS:

span{
    width: 0;
    overflow: hidden;
    display: inline-block;
}

Разметка:

Here_<span> </span>is_<span> </span>an_<span> </span>example...