にしし ふぁくとりー:西村文宏 個人サイト

No.4418 - 今日のひとことログ

更新

■LOG No.4418

にししふぁくとりーHOMEに掲載している「今日のひとこと」の過去ログ(掲載履歴)です。 RSS

No.4418 〔704文字〕 📝

CSSを使うと、「描画領域の空間いっぱいまで文字を表示するが、はみ出る場合には『…』記号等で省略する」という装飾が作れる。描画領域の空間が環境によって変化するときに、文章を複数行に折り返すことなく1行だけ表示させたい場合に使える。概ね、overflow:hidden;white-space:nowrap;text-overflow:ellipsis; と、描画空間を制限する何らかのプロパティ(例えばmax-widthなど)を併用することで実現できる。しかし、一覧表などのような「table内に含まれる特定のセル」をそのように描画したい場合もあるのだが、td要素にtext-overflowプロパティを指定してもうまくいかない。セル幅は可変長な領域なので「はみ出る部分」を判断できないからだろう。table要素にtable-layout:fixed;を指定する手もあるのだが、そうすると各列の幅が自動調整されなくなって困る。そういう場合には、td要素に対してtext-overflowプロパティ等を使うのではなく、td要素の中に何らかの要素(例えばspan要素)を含めておいて、その要素の横幅を固定するのが良さそうに感じる。例えば、span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:50vw; }のようにして、td要素にspan要素を含めると、テーブル全体では列幅の自動調整が働き、問題の列だけは固定幅ではみ出る文字列が「…」記号で省略されるようになり、うまくいく。
2021年5月
1
2345678
9101112131415
16171819202122
23242526272829
3031
2021年6月
12345
6789101112
13141516171819
20212223242526
27282930
2021年7月
123
45678910
11121314151617
18192021222324
25262728293031

Powered by てがろぐ Ver 3.7.0

--- 当サイト内を検索 ---