エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
table-layout: fixed; せずに text-overflow: ellipsis; する - コンパイラかく語りき
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
table-layout: fixed; せずに text-overflow: ellipsis; する - コンパイラかく語りき
長過ぎる文字列に対して、文末に「…」をつけて省略して表示したい時があります。 これをHTMLのtable要素... 長過ぎる文字列に対して、文末に「…」をつけて省略して表示したい時があります。 これをHTMLのtable要素で実現する方法について書きます。 固定幅テーブル まず、行が固定幅で良いのなら以下のように書けます。 table { table-layout: fixed; } td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } これで、tdの文字列が長すぎる場合にhogehogehoge... のように表示されます。 でも実務では、行は可変幅のままであって欲しいケースがほとんどだと思います。 可変幅テーブル 可変幅を保ったまま、tdの中身を省略記法にしたい場合は以下のとおりです。 table { /* table-layout: fixed; */ } td { white-space: nowrap; o