5

私はこのhtmlを持っています

<div class="externalWidth">
    <div class="container">
        <div class="element">this_is_a_really_long_text_without_spaces</div>
        <div class="element noWrap">:-)</div>
    </div>
</div>

<div class="externalWidth">
    <div class="container">
        <div class="element ">this is a really long text without spaces</div>
        <div class="element noWrap">:-)</div>
    </div>
</div>

そしてこのcss

.externalWidth { width: 200px; }
.container { margin-bottom:10px; display:inline-table; height:40px; width:100%; }
.element { display:table-cell; }
.noWrap { white-space:nowrap; }

私はそれを実証するためにjsfiddleを作りました。両方の のテキストは.elementサーバーから読み取られ、ノックアウト経由でバインドされます。これを次のようにしたい：

  • 2番目.elementには必要なだけのスペースが必要です
  • 最初の.elementものには残りのスペースが必要です。可能であれば、複数の行に分割する必要があります。

すべて正常に動作しますが、長い単語はテーブル全体を拡大します。必要に応じて単語を分割することは可能ですか?

私も試しましtable-layout:fixed;たが、2つの列ができ100pxました。

編集：ありがとう。word-break: break-all;まさに私が必要としていたことをしました。

4

4 に答える 4

4

CSSword-breakプロパティを使用

このデモを試す

于 2012-12-20T12:59:48.580 に答える
1

非常に長い単語にソフトハイフンを挿入するために、(サーバー上で、またはサーバー上でこれを行うことができない場合は JS で) コンテンツを「前処理」することができます。 &shy;は使用するエンティティであり、これにより最新のブラウザは必要に応じてソフト ハイフンで区切ることができますが、必要でない場合、文字に目に見えるギャップはありません。

于 2012-12-20T12:56:25.020 に答える
1 
word-wrap: break-word;
word-break: break-all;
于 2012-12-20T13:00:15.970 に答える
1

<wbr/>前処理オプションを追加するには、html タグ、単語 break を使用できます。ソフトハイフン ( ) と同じことを行いますが、壊れたときに見苦しい&shy;ハイフンを追加することはありません :)ここにフォークされたフィドルがあります。

すべてのアンダースコアの後にタグを挿入するだけです。JavaScript の場合:

str.replace(/_/, "_<wbr>");
于 2012-12-20T13:09:35.700 に答える