記事詳細のページャーのSCSS

Yukimi Sato 284views 更新:2014年2月27日

今回、記事詳細下部にあるページャーの位置とデザインを若干調整しました。

.pager{
margin-top:40px;
padding-top:20px;
border-top:1px solid #EEEEEE;

    li{
    
        a{
        @include ellipsis;
        max-width:40%;
        font-size:12px;
        }
    }
    li.previous{
    
        a{
        text-align:left;
        }
    }
    li.next{
    
        a{
        text-align:right;
        }
    }
}

@include ellipsis;で指定している中身は以下です。

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

つまり一定以上(この場合幅40%が最大幅として設定しています)を越える文字数の場合は、
…で省略されるようにしました。
これで文字数に寄ってはズレていた表示もスッキリと収まるようになりました。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません