我有一堆非常长的文件名,导致HTML格式溢出。所有这些文件名都使用下划线而不是空格,如果它们是空格,则很容易断开/换行。就像这样。
此处为_is_an_example_of_areally_long_filename_that_uses_underscores_install_of_spaces.pdf
有没有什么方法可以告诉CSS将文本中的下划线视为空白或连字符,从而对下划线进行换行/换行?就像这样。
此处为_is_an_example_of_areally_long_
file_name_that_uses_underscores_
instead_of_spaces.pdf
出于我的目的,我不能使用脚本来执行此操作。我也不想使用单词换行:打断单词的技巧,因为如果不指定宽度,这通常是行不通的。此外,它在单词中间任意断开。
谢谢。
您可以使用<wbr>
标记("换行机会元素"),它允许浏览器在您放置换行的任何位置换行。
所以你的HTML应该是:
Here_<wbr>is_<wbr>an_<wbr>example_<wbr>of_<wbr>a_<wbr>really_<wbr>...
在输出HTML之前,您可以在服务器端添加此标记。
一种替代方案是实体CCD_ 2,其是零宽度空间。有时这在某些浏览器上效果更好。
使用CSS
word-break: break-all
jsfiddle代码,结果
目前似乎无法将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>
的情况下,您可以使用以下CSS插入<span> </span>
(注意空格):
span{
width: 0;
overflow: hidden;
display: inline-block;
}
标记:
Here_<span> </span>is_<span> </span>an_<span> </span>example...
如果没有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;
}
并最终设置零像素宽的空白空间作为跨度之前的内容:
.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>