CSSだけで行数を指定してテキストを丸めて省略するためにSassのmixinを作りました -『CSS』

table of contents

    CSSだけでテキストを丸めて「…」のような文字列で省略することは1行だと簡単に実現できるのですが、複数行では難しいです。簡単にSCSSで@includeで指定できるようにmixinをつくりました。

    CSSだけで一行にテキストを丸めて省略して表示する

    これは複雑な指定が必要なく、簡単に実現できます。下記のコードを記述してhtmlの任意の要素のクラス属性にu-ellipsisを与えます。

    scss


    .u-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

    compassを利用している場合は以下のように@include ellipsis;を記述するだけで、コンパイル後、上記のコードが出力されます。

    scss


    .u-ellipsis { @include ellipsis; }

    CSSだけで行数を指定してテキストを丸めて省略するためのmixin

    下記のコードを記述してhtmlの任意の要素のクラス属性にoneを記述すると1行にtwoを記述すると2行に指定することができます。

    scss


    @mixin lineClip($line-number: 2, $line-height: 1, $right-space: 1em, $background-color: #ffffff) { position: relative; overflow: hidden; height: calc(#{$line-number + em } * #{$line-height}); padding-right: $right-space; line-height: $line-height; background-color: $background-color; &:before { content: "..."; position: absolute; right: 0; bottom: 0; display: inline-block; width: $right-space; } &:after { content: ""; position: relative; right: calc(#{$right-space} * -1); float: right; width: $right-space; height: 100%; margin-left:calc(#{$right-space} * -1); background-color: $background-color; } } .one { // lineClip(row, line-height, right-space, background-color(same parent)); @include lineClip(1); } .two { @include lineClip(2, 2); }

    引数には、「行数 line-height 右側の余白 テキストボックスの背景色」を与えます。上記のmixinではデフォルト値を与えています。

    scss


    .line-clip { // @include lineClip(行数, line-height, 右側の余白, テキストボックスの背景色); @include lineClip(4, 2, 2em, #ffffff); }

    このコードの注意点としては、テキストボックスの背景色が透過していたりグラデーションしていると実装することができません。テキストが指定した行数以内で短くて省略しなかった場合、丸めたことを表す「…」の三点リーダを消すための背景色と同色の疑似要素を表示しているからです。

    おわります。

    CSSだけで行数を指定してテキストを丸めて省略するためにSassのmixinを作りました -『CSS』のアイキャッチ画像

    share

    related