除空格和连字符外，下划线上的 CSS 自动换行/换行答案

【问题标题】：CSS word wrap / line break on underscores in addition to whitespace and hyphens除空格和连字符外，下划线上的 CSS 自动换行/换行
【发布时间】：2011-06-11 15:45:00
【问题描述】：

我有一堆非常长的文件名，导致我的 HTML 格式溢出。所有这些文件名都使用下划线而不是空格，并且如果它们是空格则很容易中断/换行。像这样。

这里_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf

有什么方法可以告诉 CSS 将文本中的下划线视为空格或连字符，从而在下划线上换行/中断？像这样。

这里_is_an_example_of_a_really_long_
file_name_that_uses_underscores_
相反_of_spaces.pdf

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

谢谢。

【问题讨论】：

标签： css word-wrap line-breaks

【解决方案1】：

使用 CSS

word-break: break-all

jsfiddle - code, result

【讨论】：

这也将换行非下划线的字符。
这并不能解决问题，因为它会在每个字符之后换行，而不仅仅是下划线。

【解决方案2】：

您可以使用 标签 (http://www.quirksmode.org/oddsandends/wbr.html)，它可以让浏览器在您放置它的任何地方中断。

所以你的 HTML 应该是：

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

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

另一种选择是实体&#8203;，它是一个零宽度空间。有时这在某些浏览器上效果更好。

【讨论】：

请注意，这是一个新的 HTML5 标签，可能并非所有浏览器都 100% 支持
感谢您的回复。不幸的是，我无法对文件名进行任何服务器端处理。我需要一些方法来告诉浏览器将下划线视为空格或连字符。我希望有一些 CSS jujitsu 可以让我做到这一点。有点像 Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf
IE8不支持。
您已经留下了相当严格的约束来获得所需的输出。如果没有更多的脚本，或者接受中间断词，这根本不可能仅使用 CSS。

【解决方案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; }

&lt;a class="filename"&gt;Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf&lt;/a&gt;

【讨论】：

适用于 HTML5 我需要支持 IE 8 及更高版本。因此，此解决方案对我没有帮助。不过谢谢。
@user，即fixable for IE，但请确保仅将修复添加到特定于 IE 的 CSS（通过条件 cmets），因为有报告称在复制时零宽度空格可能会变成完整空格一些案例。但据我所知，在 IE 中没有其他方法可以做到这一点。

【解决方案4】：

如果没有 HTML5，您可以使用 Javascript 在要中断的字符之前或之后插入 ：

//Jquery
$("#id_of_the_container").html(function(index, text) {
    return text.replace(/_/g, "_<span />");
});

//Pure Javascript
var htmlText = document.getElementById("id_of_the_container").innerHTML;
document.getElementById("id_of_the_container").innerHTML = htmlText.replace(/_/g, "_<span />");

然后使用容器的 CSS 类来包装单词：

.yourClass {
    word-break : break-word;
}

最后设置一个零像素宽的空白作为 span 之前的内容：

.yourClass > span:before {
    content: "\200b";
}

$("#set").html(function(index, text) {
  return text.replace(/_/g, "_<span />");
});

.boxes-container > div {
  margin: 5px;
  max-width: 200px;
  border : solid black 2px;
  display: inline-block;
  padding : 5px;
}

.bigger {
  margin-right : 200px !important;
}

.wrap {
  word-break: break-word;
}

.wrap > span:before {
  content : "\200b";
}

.answer-example {
  color : RGB(0, 50, 0);
  border-color: RGB(0, 50, 0) !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="boxes-container">
  <div class="bigger">
    Without_Anything,
    Long_Strings_With_Underscores_Make_text_Hard_To_Wrap
  </div>
  <div class="wrap">
    Without_Span_tags,
    Long_Strings_With_Underscores_Make_text_Hard_To_Wrap
  </div>
  <div id="set" class="wrap answer-example">
    With_Span_tags,
    Long_Strings_With_Underscores_Make_text_Hard_To_Wrap
  </div>
</div>

【讨论】：

【解决方案5】：

在不使用 JavaScript 或  的情况下，您可以使用以下 CSS 插入  （注意空格）：

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

标记：

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

【讨论】：