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

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

.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%が最大幅として設定しています）を越える文字数の場合は、
…で省略されるようにしました。
これで文字数に寄ってはズレていた表示もスッキリと収まるようになりました。