12

コンマで区切られた長い文字列があり、css スタイルの word-wrap:break ワードを使用しようとしていますが、スペースのない文字列では機能しないようです。これは期待されていますか？

私のテーブルは次のようになります。

<table class="table table-striped" style="margin-top:20px;background-color:#f2f2f2;">
  <tbody>
    <tr>
      <td width="150px" valign="top" style="white-space:nowrap;"><b>Favorite Activities:</b></td>
      <td width="50px" style="word-wrap:break-word;">some,really,really,long,long,string,with,out,any,spaces,just,a,comma,delimited,list</td>
    </tr>
  </tbody>
</table>

これに対する回避策はありますか?

4

3 に答える 3

24

word-wrap:break-word;はまだ実験段階であるため、別のブラウザーではサポートされている場合とされていない場合があります。

余裕がある場合は、コンマの後にゼロ幅のスペースを挿入してください。&#8203;Unicode またはHTMLでは U+200Bです。ブラウザは、必要に応じて幅ゼロのスペースで文字列を分割します。おそらく、HTML を生成しているコードでそれを行うか、JavaScript を記述して文字を自動的に挿入することができます。

ウィキペディアも参照してください。

于 2012-09-25T00:06:55.123 に答える
4

これは、その方法に関する高速な jQuery バージョンです。

$('.table-striped td').html($('.table-striped td').html().replace(/,/g , ',&#8203;'));
于 2013-02-05T08:11:01.110 に答える
4

彼の回避策について、マイケルの答えを1つ追加しました。

ただし、いくつかのブラウザー (safari、ff、chrome の最近のバージョン) で word-wrap プロパティをテストしたところ、既に安定しているようです (最新の IE バージョンでも動作することを読んだばかりです)。ポールの例で邪魔しているように見えるのは、テーブルセル（および表示のあるもの：テーブルセル）内でそれを使用していることです。たとえば、div (with display: block) では、完全に正常に動作します。

このフィドルを見てください。それをいじると、同じことがわかります：http://jsfiddle.net/joplomacedo/DQmJB/

編集：このサイトでかなり人気のある質問に対して
、これがすでに回答されていることがわかりました。問題は、テーブル内で使用されていることにあります。テーブルレイアウトを固定に設定し、テーブル要素に特定の幅を与えることを提案する回避策: http://jsfiddle.net/joplomacedo/DQmJB/3/

テーブルに幅を追加しても問題ない場合は、これが良い方法かもしれません。

于 2012-09-25T00:19:04.370 に答える