web-dev-qa-db-ja.com

CSS、テキストがテーブルセルからオーバーフローしました

仮想マシンで作業しているので、コードをコピーできません...画面を投稿します。問題は些細なことだと思いますが、対処できません...いくつかの提案をお願いします。

テーブルコード： https://dl.dropboxusercontent.com/u/108321090/WWW1.png

CSSコードとウェブサイトのサイト： https://dl.dropboxusercontent.com/u/108321090/WWW.png

したがって、一般的に2番目のリンクでわかるように、行にテキストがあり、折り返したくないので、常にレーンとして表示され、テーブルの列の境界から外れます。

htmlcsscss-tablesword-wrapword-break
11
F1sher

実例

行ごとに2つのセルを持つ単純な2行のテーブルがあるとします。

<table>
    <tr>
        <th>First</th>
        <th>Second</th>
    </tr>
    <tr>
        <td>Tiny text</td>
        <td>VeryLongNonBreakingLineOfTextThatNeedsToWrap</td>
    </tr>    
</table>

セルの1つには、スペースやハイフンがない非常に長い単語が含まれているため、壊れることはありません。

ここにいくつかのCSSがあります：

table {
    border: 1px solid lightgray;
}
table th {
    background-color: silver;
    text-align: center;
    padding: 10px;
}
table td {
    width: 200px;
    border: 1px dotted silver;
    Word-break: break-all;
}

セルの幅は200pxに固定されています。ただし、長い非中断の単語のために、2つのことが起こる可能性があります。

（1）テーブルは、長いテキストに対応するために列幅を増やす場合があります。
（2）指定されたテーブル幅の固定レイアウトを使用するなど、他の要因によっては、テキストがセルから流出する場合があります。

適用する場合Word-break: break-allテーブルのセルに、テキストは折り返され、テーブルの列は事前定義された幅を保持します。

デモを参照してください： http://jsfiddle.net/audetwebdesign/xtKLE/

参照

CSS3 Word-breakプロパティの詳細については、次を参照してください。 http://www.w3.org/TR/css3-text/#Word-break

27
Marc Audet