CSSで文字列を省略して文末に『…』を付ける。さらにテーブル（セル）にも適用させる方法

要素内に文字列が収まらない場合、はみ出る文字を省略して、文末に『…』をつけるには『text-overflow:ellipsis』を利用する。

overflow:hidden;ではみ出す文字を非表示にして、white-space:nowrap;で改行させないことが重要。

<style>
p, div{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
-o-text-overflow:ellipsis;
}
</style>

ところが、テーブルのセル内では思い通りになりません。この場合、tableに『table-layout:fixed;』と『width:100%;』を設定し、tdに通常のテキスト省略のcssを設定すればよろしいみたい。

<table>
<tr>
<td>文字列が省略して1行にあさまります。文末には『…』もつくよ♪</td>
<td>文字列が省略して1行にあさまります。文末には『…』もつくよ♪</td>
</tr>
</table>

<style>
table{
table-layout:fixed;
width:100%;
}
td{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
-o-text-overflow:ellipsis;
}
</style>

	HTML＆CSS
	2019.07.06 07:04
	2019.07.12 07:06

Related entry

Pickup entry

• BACK
• NEXT