web-dev-qa-db-ja.com

ワードラップCSSプロパティがテーブルセルに影響しない

長い単語が1つあります...

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

...テーブルセル（<td>）に収めようとしているため、Word-wrap: break-Word;などを使用してテキストを強制的に折り返そうとしましたが、どれも含まれていないようですテキストへの影響。

（彼女の生きている例）

Screenshot - Click To Enlarge!
画像をクリックすると拡大します！

テキストは水平方向に繰り返し表示され、折り返されません。ここで使用するのはどの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;
}

そして、それはこれをもたらしました：

Screenshot - Click To Enlarge!
画像をクリックすると拡大します！

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

もしあれば、エレガントな解決策を探し続けます。

csscss-tablesword-wrap
17
its_me

セルのWord-wrapルールに加えて、CSSルールtable-layout:fixedをテーブル（および幅）に追加します。

jsFiddleの例

13
j08691

Word-break: break-Word;は.entry-content table td Chromeのインスペクタで編集中。

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

.break-Word {
    Word-break: break-Word; 
}
5
PJ McCormick

ブレークワードにまだ問題がある人のためのヒントかもしれません：私はwhite-space: normal「nowrap」に設定されているため

特にbootstrapを使用する場合、ラベルのようないくつかの要素にはwhite-space: nowrap

4
Kristof O

テキストは折り返されています折り返されています-スペースがあるため、k=rsa;の後に改行されることに注意してください。ただし、p=の値には中断するスペースがありません。

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

0
KatieK