CSSメモ二連投。
もう去年くらいにハマったやつなんだけど、メモっておいた方がいいなと思い出したのでこのタイミングで。
一行テキストが一定の幅を超えた時に超えた分は省略されて、三点リーダが付くというやつ。
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
上記の指定に加えて「一定の幅」を指定する必要があります。
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100px;
こういう感じ。でもこれだと幅が固定されちゃいます。
%指定すれば可変になるでしょって感じなんですが、ここが闇で、なぜか%などの相対指定だと省略も三点リーダも効いてくれないのです
普通の静的なページならclassで分けてそれぞれpx指定でも解決なのですが、更新性のあるコンテンツだったり、システム画面だったりするとそうもいきません。
上の画像で薄い緑の背景に載っているテキストが text-overflowによる省略を想定したものです。テキストに使えるスペースがAでもBでも同じ指定で省略したい！
という場面が往々にして訪れます。
そんな時！px指定せずにどうすれば想定した挙動を実現できるかというと！
px指定します！（えっ）
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 10px;
flex-grow: 1;
※flex-growを使うので親要素にflexないしinline-flexを指定して、該当の要素をflex-itemにしておく必要があります。
flex-growを指定することで実際のwidthは「10px＋余剰分」となります。
そして、一応px指定もしていることで省略もうまく反映してくれます。
flex-growを指定しつつ、px指定もするっていうのが肝です。
10pxは適当にこれ以上小さくはならないってサイズを指定すればなんでもOK。
