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技巧，因为通常需要指定宽度才能正常工作。 另外，它会在单词中间任意折断。

谢谢。

- dsmtoday

Answer 1

您可以使用<wbr>标签（"Line Break Opportunity element"），它可以让浏览器在您放置它的任何位置断开行。因此，您的HTML应该是：

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

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

另一种选择是实体​，它是一个零宽度空格。有时，在某些浏览器上使用此方法效果更好。

- Keltex

---

请注意，这是一个新的HTML5标签，在所有浏览器中可能不被100%支持。 - Omer Tuchfeld

感谢您的回复。不幸的是，我无法对文件名进行任何服务器端处理。我需要一些方法来告诉浏览器将下划线视为空格或连字符。我希望有一些CSS技巧可以帮助我做到这一点。就像<span style="white-space-char:_">Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf</span>一样。 - dsmtoday

它不受IE8支持。 - Knu

您已经设置了相当严格的限制以获得所需的输出。如果没有进一步的脚本或接受单词中断，仅使用CSS是不可能实现的。 - Joe Corby

Answer 2

使用CSS

word-break: break-all

jsfiddle - 代码, 结果

- hackhowtofaq

---

这也会换行那些不是下划线的字符。 - rmcclellan

这并不能解决问题，因为它会在每个字符后面进行换行，而不仅仅是下划线。 - user428747

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>

- user

---

<wbr>在HTML5中是有效的，但我需要支持IE 8及以上版本。因此，这个解决方案对我没有帮助。还是谢谢您。 - user428747

@user，这在IE中是可以修复的（https://dev59.com/NWAg5IYBdhLWcg3wS5aC），但请确保只将此修复添加到IE特定的CSS中（通过条件注释），因为有报告称在某些情况下，零宽空格可能会变成全角空格。但据我所知，在IE中没有其他方法可以解决这个问题。 - user

对于 jQuery => var fileName = $('.filename').html(); $('.filename').html(fileName.replace(/_/g, '_<wbr/>'));那帮了我大忙。谢谢。 - Eatsam ul haq

Answer 4

不使用JavaScript或<wbr>，你可以使用以下CSS插入带有<span> </span>（注意空格）：

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

标记语言：

标记：

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

- spaark

Answer 5

没有HTML5，你可以使用JavaScript在想要断开的字符前后插入<span></span>：

//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>

- Sirmyself