2

2列のテーブルがあります。最初の列に非常に長い単語があります。長い言葉を包んでもらいたい。

これは、HTMLテーブルのワードラップと同じ問題であることに気付いたかもしれません。そのスレッドで選択された答えは、「table-layout：fixed」を追加することです。これは、列幅を固定する必要があることを意味します。ただし、最初の列のコンテンツが長すぎて1行に収まらない場合にのみ、2番目の列がコンテンツに十分な幅を使用するように、テーブルを柔軟に保つ必要があります。

以下のコードは問題を示しています。IE/Chromeでうまく機能します。しかし、FireFoxでは、行は折り返されていません。

Firefoxでこの問題を回避するためのアイデアはありますか？

更新： 9日前にリリースされたFireFox15Betaでテストしました。「ワードブレイク」はFirefox15でサポートされるようになりました。ただし、15がリリースされて過半数になるまでには時間がかかる可能性があるため、以前のバージョンでは回避策が必要になる場合があります。

<table style="width: 100%;">
    <tr>
        <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <a href='#' style="white-space:nowrap;">Action</a>
        </td>
    </tr>
</table>
4

1 に答える 1

-1

マークアップのいくつかの変更、以下のコードを参照してください:

<table style="width: 100%; table-layout:fixed;">
    <tr>
        <td>
            <div style="word-break:break-all; word-wrap: break-word;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <a href='#' style="white-space:nowrap;">Action</a>
        </td>
    </tr>
</table>
  • table-layout:fixed;テーブル スタイルを追加します。
  • スタイリッシュに使用word-wrap: break-word;しword-break:break-all;てください。<div>

すべての主要なブラウザー IE、FF、Safari、および Chrome で動作します。

デモを見る

于 2012-08-03T07:42:49.327 に答える