Flexboxをインライン要素に使って3点リーダー表示させる

アイコン(固定幅)とテキスト(可変幅)のインライン要素にflexboxでスタイリングする

HTML

<div class="flexContainer">
    <!-- アイコン部分 Fontawesome とか -->
    <i class="flexContainer__icon fa fa-check" aria-hidden="true"></i>
    <!-- テキスト部分 -->
    <span class="flexContainer__text">ああああああああああああああああ</span>
</div>

というHTMLに対して

CSS

.flexContainer {
    display: flex;
    flex-direction: row;
    /* 垂直方向の揃え方はお好みで */
    align-items: baseline;
}

.flexContainer__icon {
    /* 伸びも縮みもしない(0 0) ベース幅はコンテンツのサイズ(auto) */
    flex: 0 0 auto;
}

.flexContainer__text {
    /* 伸びも縮みもする(1 1) ベース幅はなし(0) */
    flex: 1 1 0;
}

とスタイルを当てると、アイコン部分は固定幅に、テキスト部分は可変幅にすることができます。

アイコン部分は、代わりにロゴや写真などを置いてもいいですね。

テキスト部分は、ウィンドウ幅に応じて伸び縮みして、収まりきらなければ折り返し表示されます。

アイコンとテキストのマークアップ順序を変えれば、左右逆転させることができます。

テキストを3点リーダー表示に変えてみる

CSS

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

3点リーダー用のスタイルを作って、

HTML

    <!-- テキスト部分 -->
    <span class="flexContainer__text textEllipsis">ああああああああああああああああ</span>

テキスト部分に追加すれば、
先ほどと同様、テキスト部分はウィンドウ幅に応じて伸び縮みしますが、収まりきらない場合には3点リーダー表示されるようになります。

以上です。