5

固定レイアウトでテキストを折り返そうとしていますが、テキストにスラッシュが含まれていると機能しません。

Javascript (純粋な CSS) からスペースを挿入せずにこれを修正できますか?

jsfiddle:

http://jsfiddle.net/HgBhk/1/

Not working:
<div style="display:table; width:170px; background-color:cyan;">
    <div style="display:table-row">
        <div style="display:table-cell;word-wrap: break-word;">abfdbfdbfdb/dfbfdbdfbfbf/bdffbdbfdfbddfbdfbdfb</div>
        <div style="display:table-cell; width:34px;  background-color:red;">xxxxx</div>        
    </div>
</div>

</br>
Working:
<div style="display:table; width:170px; background-color:cyan;">
    <div style="display:table-row">
        <div style="display:table-cell;word-wrap: break-word;">abfdbfdbfdb dfbfdbdfbfbf bdffbdbfdfbddfbdfbdfb</div>
        <div style="display:table-cell; width:34px;  background-color:red;">xxxxx</div>        
    </div>
</div>
4

2 に答える 2

1

<wbr>スラッシュやその他の文字が出現するたびに、タグまたは幅ゼロのスペースを挿入します。&#x200b;これらの文字は、その後に直接改行できるものとして扱われます。これらの選択肢の選択は少し複雑ですが、あなたのコードは既に古いバージョンの IE では動作しないため、ここでもそれらを無視することができ、これが&#x200b;正しい選択になります。つまり、次のように記述します。

abfdbfdbfdb/&#x200b;dfbfdbdfbfbf/&#x200b;bdffbdbfdfbddfbdfbdfb

問題はスタイリングの問題ではなく、キャラクター レベルにあります。

空白文字を含まない文字列は、通常、折り返しで分割できないため、ブラウザが許容可能な区切り点で改行するか、適切にハイフネーションして単語分割を使用するように確実に設定できない限り、そのようにする必要があります。のような設定word-wrap: break-wordは、ラッピングを制御する適切な方法がなく、オーバーフローを回避する必要がある場合の例外的なケース、緊急時の休憩を意味します。

于 2013-04-29T13:02:00.160 に答える