HTML と CSS だけで複数絵文字の羅列を 1 行に収める

まず結果を見たい人向け

ソースコードとサンプル
(HTML 編集が可能なブログサービスでの利用を想定しているため, CSS ではなく HTML の style 属性を使用している.)

作りたいもの (要件)

- 複数の絵文字を連打したい.
- デスクトップでもモバイルでも 1 行で表示したい. (変に改行させたくない.)

実装解説

まず <p> (<div> でも良い) の中に複数の絵文字を連打する. このとき絵文字の種類ごとに <span> で囲む.

<p>
  <span>
    🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰
  </span>
  
  <span>
    😇😇😇😇😇😇😇😇😇😇😇😇😇
  </span>
  
  <span>
    🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏
  </span>
</p>

次に Flexbox を用いてこれらの絵文字が横一列に並ぶようにする.

<p style="display: flex;">
  <span>
    🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰
  </span>
  
  <span>
    😇😇😇😇😇😇😇😇😇😇😇😇😇
  </span>
  
  <span>
    🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏
  </span>
</p>

このままだと <p> の幅が十分でない場合 (≒ モバイル表示時) に各絵文字がそれぞれ改行され, 複数行に渡り表示される.

そこで, 各絵文字の 1 行目のみを表示するように <p> を調整する. 具体的には, line-height (1 行の高さ) と height (<p> そのものの高さ) を同じ値とし, overflow: hidden を用いてはみ出した部分 (2 行目以降) を隠す.

<p style="display: flex; line-height: 1.5em; height: 1.5em; overflow: hidden;">
  <span>
    🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰
  </span>
  
  <span>
    😇😇😇😇😇😇😇😇😇😇😇😇😇
  </span>
  
  <span>
    🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏
  </span>
</p>

なおこのままだと各絵文字は <span> 内で左寄せであるから, 各絵文字の間に微妙な空白が生じることがある. この問題を軽減するため, 各絵文字を text-align: justify; を用いて均等割り付けする.

<p style="display: flex; line-height: 1.5em; height: 1.5em; overflow: hidden; text-align: justify;">
  <span>
    🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰
  </span>
  
  <span>
    😇😇😇😇😇😇😇😇😇😇😇😇😇
  </span>
  
  <span>
    🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏
  </span>
</p>