CSSEllipsis文字列の始まり

ByDavid Walsh onDecember 17、2018

  • 6

CSS text-overflow: ellipsis(固定のwidthおよびoverflow: hiddenと結婚したときは非常に嬉しかったですCSS仕様とブラウザに導入されました。この機能により、JavaScript幅の計算と文字列の幅の計算および切り捨てを組み合わせる必要がなくなりました。CSSの省略形もアクセシビリティに非常に適していました。CSStext-overflow: ellipsis機能は素晴らしいですが、基本的には文字列の最後だけを楕円化することを目的としています。画面の最初を楕円化する場合はどうなりますか?使用例はかなり合理的です:ファイルパスを表示することを考えてください-ファイルのセットのディレクトリの何倍もは同じです。この場合、文字列の最初ではなく最後を表示します。文字列の最初の部分で省略のコツを紹介します。

CSS

省略記号の表示弦の前にはモスがあります最後の省略記号と同じですが、簡単なトリックが1つだけあります。文字列の先頭に省略記号を追加するには、RTLとtext-alignを使用して、文字列の先頭をクリップします。 text-alignからRTLを再生することは、要素または文字列の先頭でCSS省略記号の目的の効果を得る天才的な方法です。 CSS仕様がより堅牢な省略記号システムを実装するのは素晴らしいことですが、今のところ、私はこのような驚くべきCSSトリックを崇拝しています!

Write a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です