17

1つ長い言葉があります...

p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx+wnDhlr7GqHiH6lAaPPuN5F7RjUrtvGyxxZkClJsLaTDeqg/FuJXU7RYdPQ2Ka++tfw0Z9+SRKatLUQQeCqLK8z1/V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc+NidiW4/ixw4QIDAQAB"

<td>...表のセル ( )に収まるようにしようとしてword-wrap: break-word;いますが、テキストを強制的に折り返すためになどを使用しようとしましたが、どれもテキストに影響を与えていないようです。

（これが実際の例です）

スクリーンショット - クリックして拡大!
画像をクリックして拡大してください！

テキストは横方向に延々と続き、折り返されません。ここで使用する CSS プロパティはどれですか?

コード

<table>
     <thead>
          <tr>
                <th>Name
                </th><th>Type
                </th><th>Value
                </th><th>TTL
          </th></tr>
     </thead>
     <tbody>
          <tr>
                <td>wtnmail._domainkey.whatthenerd.com.</td>
                <td>TXT</td>
                <td>"v=DKIM1; k=rsa; p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx+wnDhlr7GqHiH6lAaPPuN5F7RjUrtvGyxxZkClJsLaTDeqg/FuJXU7RYdPQ2Ka++tfw0Z9+SRKatLUQQeCqLK8z1/V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc+NidiW4/ixw4QIDAQAB"</td>
                <td>300</td>
          </tr>
     </tbody>
</table>

CSS

j08691の答えに基づいて、私は今これを使用しています:

table {
   table-layout: fixed;
   word-break: break-all;
   word-wrap: break-word;
}

その結果、次のようになりました。

スクリーンショット - クリックして拡大!
画像をクリックして拡大してください！

はい、テーブルは以前ほどスタイリッシュではありませんが、少なくともデータが表示されることを確認できます (ブラウザのサイズが変更された場合、つまり解像度が小さくなった場合でも)。

もしあれば、まだエレガントなソリューションを探しています。

4

4 に答える 4

13

セルのルールに加えword-wrapて、CSS ルールtable-layout:fixedを表 (および場合によっては幅) に追加します。

jsFiddle の例

于 2012-10-02T17:12:28.107 に答える
5

word-break: break-word;.entry-content table tdChrome のインスペクターで編集している間、私のために働きました。

問題のあるセルにのみ適用するにはtd、特定のクラスを作成して td の HTML に追加します。

.break-word {
    word-break: break-word; 
}
于 2012-10-02T17:13:16.337 に答える
5

ブレークワードにまだ問題がある人へのヒントかもしれません: white-space: normal「nowrap」に設定されていたので、追加する必要がありました

特に、ラベルのようないくつかの要素をブートストラップを使用する場合 white-space: nowrap

于 2015-09-23T12:51:28.220 に答える
0

テキストがk=rsa;折り返されています -そこにスペースがあるため、テキストがどのように壊れているかに注目してください。p=しかし、ブレークする値にはスペースがありません。

ただし、word-break: break-all;その要素に仕様を追加することはできます。これは、探しているものにより近い可能性があります。http://jsfiddle.net/zu6Eh/を参照してください。

于 2012-10-02T17:22:31.957 に答える