web-dev-qa-db-ja.com

空白とハイフンに加えて、アンダースコアのCSSワードラップ/改行

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のトリックは、通常、幅も指定しないと機能しないため、使用したくありません。また、単語の途中で任意に壊れます。

ありがとう。

cssword-wrapline-breaks
33
dsmtoday

<wbr>タグ（ http://www.quirksmode.org/oddsandends/wbr.html ）を使用すると、どこに置いてもブラウザを壊すことができます。

したがって、HTMLは次のようになります。

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

HTMLを出力する前に、このタグをサーバー側に追加できます。

別の方法は、ゼロ幅スペースであるエンティティ&#8203;です。これは、特定のブラウザでうまく機能する場合があります。

18
Keltex

CSSを使用する

Word-break: break-all

jsfiddle-コード 、 結果

16
hackhowtofaq

現在、この目的で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>
2
user

JavaScriptも<wbr>も使用せずに、次のCSSで<span> </span>を挿入できます（スペースに注意してください）。

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

マークアップ：

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

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>
0
Sirmyself