/mrsekut-p/CSS: text-overflow

generated at 2/15/2025, 7:49:59 PM
CSS: text-overflow
はみ出たテキストの表示方法を指定


Can I Use
mdn

値
clip
block containerからはみ出たtextは切り取って表示しない
このことを「clip」と呼ぶ
text-overflow: ellipsis
block containerからはみ出たテキストがあることを示すため，ellipsis文字（省略記号: U+2026）を表示
例えば、 hogehoge... になる
文字列
block containerからはみ出たテキストがあることを示すため、指定した文字列を表示
例えば、 text-overflow: "-" とすれば、 hogehoge--- になる
空文字 "" を指定すると文字の境界でclip
Chrome対応してないっぽい？イケてるとこ見たこと無い
fade
端が透明になる


はみ出した部分を三点リーダー(...)にする場合は、以下の3行がコピペ的に使用される
cssp {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
この記事が1行ずつ書いててわかりやすい
Tailwind CSSでもTailwindCSS: truncateとして用意されている ref
TailwindCSS: line-clampのほうが便利
 line-clamp-2 とかで2行目の末尾に三点リーダーを出せる
https://blog.to-ko-s.com/tailwind-css-truncate-line-clamp/#i-5

関連
CSS: overflow
CSS: white-space



#??
block containerの幅はどうやって決まる？
どこに指定するの？
wrapしてるbox要素？
divとか
textを表示している要素？
spanとかpとか
以下のような構造になっている時に、「これ」に対して、elipsisできる？
sFContainer
	[これ(FItem)] [FItem]
つまり、対象の右側になんかいる場合に、elipsisしたい
FContainerがに上限があり、
右側FItemは固定値。存在しないこともある
「これ」が可変
Fは flex を指す