2

1 つの要素を含む HTML テーブル セルの縮小に問題があります。HTML と CSS は次のとおりです ( 内のテキストにスペースがないことに注意してください)。

HTML

<table>
 <tr>
  <td class="first-col">Column 1</td>
  <td class="second-col"><a   href="http://example.com">aaaaaaaaaabbbbbbbbbbbbbbbbccccccccccccddddddddddeeeeeeeeeeffffffffffff</a></td>
 </tr>
</table>

CSS

table {
width: 100%
}
.first-col {
width: 30%;
}
.second-col {
width: 70%;
}

http://jsfiddle.net/flynam/GwH93/1/を参照してください。

ページの幅を小さくしても、2 番目の列は要素内に含まれるテキストの幅よりも小さくなりません。理想的には、セルがテキスト行全体の長さよりも小さくなる必要がある場合に、テキストを省略記号で切り捨てたいと考えています。

この CSS を追加しても何も起こりません。

.second-col {
width: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

何かご意見は？

4

1 に答える 1

1

まず、列にセットを追加widthします。ブラウザはテキストを切り詰めるタイミングを知る必要があるため、widthそれ以外を指定する必要があります。width にauto設定すると、テキストが拡大されます。auto

次に、表示を または のいずれかに設定しinline-blockますblock。これは、text-overflowプロパティがブロック コンテナーにのみ適用されるためです。

.second-col {
    width: 30%;
    display: block; /* or inline-block */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

デモフィドル

于 2013-11-06T10:58:24.517 に答える