CSS换行/除空格和连字符外，在下划线处还带有换行符

|| 我有一堆很长的文件名，这些文件名导致我的HTML格式溢出。所有这些文件名都使用下划线而不是空格，如果它们是空格，则很容易断开/包装。像这样。 这是_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf 是否可以通过某种方式告诉CSS将文本中的下划线视为空格或连字符，从而也将下划线换行/换行？像这样。 这里_是_一个_例子_的_一个_真的_长_ file_name_that_uses_underscores_ 代替_of_spaces.pdf 就我的目的而言，我无法使用脚本来执行此操作。我也不想使用word-wrap：break-word技巧，因为在没有指定宽度的情况下通常无法使用。而且，它在单词中间任意中断。 谢谢。     
2020-02-01 6 条评论
分享

没有找到相关结果

    已邀请:

    捕暑句簿姓

            您可以使用ѭ0标记（http://www.quirksmode.org/oddsandends/wbr.html），使浏览器无论放置在何处都可以中断。 因此，您的HTML应该是： 
    Here_<wbr>is_<wbr>an_<wbr>example_<wbr>of_<wbr>a_<wbr>really_<wbr>...
    您可以在输出HTML之前在服务器端添加此标记。 另一种选择是实体
    &#8203;
    ，它是零宽度的空间。有时，这在某些浏览器上效果更好。     
    2020-02-01 0 0
    分享

    泻伴墓荒

            使用CSS 
    word-break: break-all
    jsfiddle-代码， 结果     
    2020-02-01 0 0
    分享

    蹦吃舷弦

            看来您目前无法为此目的使用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>
    2020-02-01 0 0
    分享

    博沮富教全

            如果不使用JavaScript也不使用
    <wbr>
    ，则可以使用以下CSS插入
    <span> </span>
    （注意空格）： 
    span{
    width: 0;
    overflow: hidden;
    display: inline-block;
}
    标记： 
    Here_<span> </span>is_<span> </span>an_<span> </span>example...
        
    2020-02-01 0 0
    分享

    春驹晴陪

            如果没有HTML5，则可以使用Javascript在要中断的字符之前或之后插入“ 12”： 
    //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>
    2020-02-01 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册