動的に記事を出力するとき、通常であればPHPを使って文字列を省略してきました。しかしPHPがわからない、仕事でシステムの人に頼むのも面倒。そのような人に持って来いなのが今回の省略技です。なんとCSSを使って文字列を省略することができるのです。今回はこの方法をご紹介します。
text-overflow
このプロパティは、ボックスに収まらない文章の表示方法を指定できます。そして表示方法を「ellipsis」に指定するとはみ出して表示されない文字列を省略します。
使用方法
省略したい文字列の要素にクラス「is-text-overflow」を追加するだけ。
html
<div class="Contents"> <div class="Container"> <div class="Container__text is-text-overflow"> 長い長い長い長い長い文字列を省略します。 長い長い長い長い長い文字列を省略します。 長い長い長い長い長い文字列を省略します。 </div> </div> </div>
CSS
.Container { width: 300px; margin: 30px; padding: 30px; border: 1px solid #666; } .is-text-overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
SCSS
.Container{ width: 300px; margin: 30px; padding: 30px; border:1px solid #666; } .is-text-overflow{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }