1026.tv

text-overflow: ellipsis;で三点リーダが見切れる

Published
Category
Tech
Tags

text-overflow: ellipsis;padding-lefttext-align: right; を併用すると、webkit/blinkで端が見切れる。

三点リーダの扱い?の問題のようだが、原因・詳細は不明。とにかく、3つの絶妙な組み合わせてよって起こる。

リンクを左右に寄せて、「次の記事:xxxxxxx」「前の記事:xxxxxxx」といった感じで使用したい場合、paddingを指定するためのラッパーを一つ増やしたり、見きれる分padding-rightでハードコードしてやる必要があるので注意。