0

記事に表示する長い名前空間 ( など) があり、ウィンドウの幅が不十分な場合はMyProject\Sub\Levelバックスラッシュ文字 ( ) で囲みます。\CSS または JS/jQuery を使用してこれを実装するにはどうすればよいですか?

4

4 に答える 4

2

文字の後に改行が許可されていることをブラウザーに伝えるには、文字の後に ZERO WIDTH SPACE (ZWSP) 文字 U+200B を挿入します。HTML マークアップでは、文字参照 ` ' を使用できます。

MyProject\​Sub\​Level

スクリプトを使用して文字を追加する場合は、文字列リテラルを使用して文字自体を入力できます\u200b。

一部の古いブラウザー (IE 6) ではこれに問題がありましたが、現在では、このアプローチは古い<wbr>タグ (十分にサポートされていましたが、新しいバージョンの IE では台無しになっています) よりもうまく機能するようです。

于 2012-09-22T19:15:45.757 に答える
1

1 つのオプションは、文字&shy;の前後にソフト ハイフン ( )を使用することです。\ソフトハイフンを使用すると、単語を特定のポイントで区切ることができ、単語が実際にそのポイントで区切られる場合にのみ表示されます。

また、コピーして貼り付けた場合もテキストに表示されません (Chromium 19/Ubuntu 11.04 でテスト済み)。このアプローチでは、次の HTML でreplace()jQuery のメソッドを使用します。html()

<ul>
    <li>\some\text\possibly\a\path</li>
    <li>\another\path</li>
    <li>\something\else\also\quite\long</li>
</ul>​

そしてCSS：

li {
    width: 8em;
    border: 1px solid #000;
}​

jQuery:

$('li').html(function(i, h) {
    return h.replace(/(\\)/g, '&shy;$1&shy;')
});​

JS フィドルのデモ。

明らかに、文字の両側にソフトハイフンを使用する必要はありません。これは、使用\方法のデモンストレーションにすぎません。

代わりに-、ブレークポイントでの文字の出現を避けたい場合は、上記と同じアプローチを使用しますが、代わりに空のspan要素を挿入し、それにスタイルを与えますdisplay: inline-block;:

jQuery:

$('li').html(function(i, h) {
    return h.replace(/(\\)/g, '$1<span></span>')
});​

CSS:

li {
    width: 8em;
    border: 1px solid #000;
}
li span {
    display: inline-block;
}

JS フィドルのデモ。

参考文献:

于 2012-09-22T18:24:47.077 に答える
1

テキストを含む要素で次の css を使用します。

word-wrap: break-word;

これは、最新のブラウザーでサポートされている css3 プロパティです: Google Chrome 6、Internet Explorer 8、Firefox 3、Opera 10、Safari 5。

Acclaration :/文字だけで壊れることはありません。コンテナーの伸縮に応じて、単語の任意の文字で壊れる可能性があります。

于 2012-09-22T18:11:51.477 に答える
0

おそらく、jQuery の例に従うことができます-本文が読み込まれた後にテキストを検索して置換し、すべてのスラッシュの後に改行を挿入します

于 2012-09-22T18:29:22.313 に答える