読者です 読者をやめる 読者になる 読者になる

frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

table-cellにtext-overflowを効かせる

スポンサードリンク

text-overflowプロパティは厄介なもので、特定の条件下でないと効いてくれないことが多々あります。

先日書いたものはselectbox内でJsを使用して3点リーダーを表示させるものでした。
www.frontendmemo.xyz

今回はdisplay:table-cell内のテキストにtext-overflowを効かせるやり方です。
display:table-cell内でtext-overflowが効かない理由はよくわかりませんが、max-width:1pxで効くようになります。
これもよく理由がわかりません。わかる方はコメントいただきたいです。

デモを載せておきます。

DEMO

See the Pen aWvGEe by funclur (@funclur) on CodePen.


おまけ

また、2行目や3行目からtext-overflowを効かたいという要望があることもあるでしょうが、こちらは現実的じゃないかと思います。
理由としては改行して2行目のwidthを越した分3点リーダーを付けることはできるが、レスポンシブデザインやスマホでは幅が可変の為、
改行の位置にずれが出てきてしまう、という点とPCの場合でも更新頻度が高い所では運用コストが上がってしまうことが理由として挙げられます。