複数行で「text-overflow: ellipsis;」みたいなことをする方法色々。 | blue sky ITとあるように、 要するに横方向にはみ出した要素にしか効いてくれないのだ。 white-space: nowrap;を使用しているのもこの辺が絡んでくる。 複数行でも省略して見せる方法 ここからは、複数行でも省略する方法を解説していく。 ほぼ全ブラウザ対応・全て文字が省略される前提だが簡単 まずはcssだけで行う方法から。 まずは、疑似要素を上に重ねて最後の文字に重ねて隠す方法から。 See the Pen elipsis by blue (@aoiBlue) on CodePen.0 こんな感じで、非常に簡単にかけるのが特徴。 まず表示領域を設定して、position: relativeを設定。 疑似要素にposition: absoluteを設定し、 「…」を表示したい位置に疑似要素を移動させる。 背景を同じ色にして後ろの文字を隠し、 省略しているかのように見せかける。 ただ、これの問題
