除了空格和连字符之外,下划线上的CSS自动换行/换行符

Question

我有一堆非常长的文件名导致我的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

出于我的目的,我不能使用脚本来执行此操作.我也不想使用word-wrap:break-word技巧,因为如果没有指定宽度通常也不行.而且,它在单词的中间任意打破.

谢谢.

Answer 1

您可以使用<wbr>标记(http://www.quirksmode.org/oddsandends/wbr.html),它可以让浏览器在您放置浏览器时中断.

所以你的HTML应该是:

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

您可以在输出HTML之前在服务器端添加此标记.

另一种选择是​零宽度空间的实体.有时这在某些浏览器上效果更好.

Answer 2

使用CSS

word-break: break-all

jsfiddle - 代码, 结果

Answer 3

目前您似乎无法使用 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>