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>
Web制作覚書
- PHP
- JavaScript
- HTML&CSS
- Youtube(iframe)の埋め込みコードをレスポンシブ対応で掲載する
- CSSで文字列を省略して文末に『…』を付ける。さらにテーブル(セル)にも適用させる方法
- 横幅いっぱい(ピッタリ)に要素を並べるCSS(もちろんレスポンシブで…)
- freo