話題の人物YouTubeまとめ&雑記雑感雑多ログ

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を設定すればよろしいみたい。

HTML

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

CSS

<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>

関連記事

横幅いっぱい(ピッタリ)に要素を並べるCSS(もちろんレスポンシブで…) 2018.05.01 Youtube(iframe)をレスポンシブ対応で掲載する 2018.05.01

雑記雑感雑多ログ

タイ・シルバーの新芽2本目を確認 2018.05.12 画像遅延スクリプト「echo.js」でページ表示の体感速度を上げる。 2018.05.11 格闘技イベント「RIZIN」での衝撃KOシーン!堀口恭司vsイアン・マッコール 2018.05.09 広告収入で賄う無料タクシー「nommoc/ノモック」とは!? 2018.05.08 これって…そのためのTシャツ!?ポケットティッシュをスマートに出せるアイデアTシャツ 2018.05.07 ゴールデンウィーク明けの仮想通貨動向 2018.05.07 プロレスの登場シーンをかっこ良く決めるつもりが、張り切り過ぎてしまった結果・・・ズッコケ名シーン。 2018.05.05 新サイト「CCindex/仮想通貨・暗号通貨まとめ」リリース! 2018.05.04 指定ディレクトリ(フォルダ)内の画像ファイルを抽出してランダム(重複なし)に表示させる最短コード 2018.05.01 最低覚えておきたいチャートの見方 2018.05.01

PR

【CCindex】仮想通貨・暗号通貨まとめ