web-dev-qa-db-ja.com

スラッシュ（/）でHTMLテキストを分割する最良の方法は何ですか？

360px幅のHTMLテーブルがあります。問題は、URLが表示されることですhttp://this/is/a/really-really-really-really-really/long/urlテキスト内。これにより、テーブルが水平方向に拡張され、スクロールバーが下部に表示されます。

私は思いませんoverflow:hiddenは、テキストの半分が非表示になるため機能します。

CSSのスラッシュ（/）とダッシュ（-）で改行を強制する最良の方法は何ですか（うまくいけば）？

IE7 +、Chrome、Firefox、Safariで動作するはずです。

Rails 3とjQueryで作業しています。

htmlcsshtml-tableline-breaks
34
B Seven

Word-wrap : break-Word;は次のように使用できます。

<div>http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg</div>

div {
    width : 50px;
    border : 1px solid #000;
    Word-wrap : break-Word;
}

私はこれをテストしました：I.E. 6/ 7/8、Firefox 7、Opera 11、Safari 5、Chrome 15

ここにjsfiddleがあります： http://jsfiddle.net/p4SxG/

15
Jasper

Css _Word-wrap: break-Word;_は機能しますが、その実装はブラウザーによって異なります。

コンテンツを制御していて、正確なブレークポイントが必要な場合は、

  • a _<wbr>_改行（IE8を除くすべての主要なブラウザーでサポート CanIUse.com ）;
  • _&#8203;_ゼロ幅スペース（U + 200B）-IEで醜い<= 6
  • _&shy;_ソフトハイフン-もちろん、これは分割時にハイフンを追加しますが、これは常に望ましいことではありません。

IE8を使用する必要がある大規模な企業ユーザーベースがいるため、この問題が発生したときは、サーバー側のコードでC＃someString.Replace("/", "/&#8203;")を使用しました。

補足：電子メールアドレスにゼロ幅のスペースを挿入すると、ユーザーが電子メールクライアントにコピーして貼り付けると、スペースもコピーされ、電子メールは失敗し、ユーザーは理由を確認できません（スペースはゼロです）幅...）

参考文献

参考文献

46
Ruskin