フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

CSSだけでハロウィン気分の404ページ作った

まず、text-overflow: ellipsisとは、オーバーした分の文字列を...で省略してくれるというものです。
詳しくはMDN web docs: text-overflowを参照してください。

前提条件

まず、text-overflow: ellipsisを有効にするためには、以下のプロパティ達を設定する必要があります。

style.css
.over-text {
  /* オーバーした要素を非表示にする*/
  overflow: hidden;

  /* 改行を半角スペースに変換することで、1行にする */
  white-space: nowrap;

  /* 幅を指定しないとテキストの長さによって要素の幅が変わるため指定 */
  width: 120px;

  /* オーバーしたテキストを3点リーダーにする */
  text-overflow: ellipsis;
}

text-overflow: ellipsisだけ指定していて有効にならないという人は、まず上記のプロパティを設定してみましょう。

それでも、動作しない場合

上記の、前提条件を満たしても動作しない場合は以下のような場合があります。

display: flexを指定している

これは実際に僕が遭遇した事例で、調べてもなかなか出てこなかったことです。

flex.css
.text-flex {
  display: flex;
  align-items: center;
}

と、上記のように指定して、テキストの高さの位置を真ん中にしようとしていたわけです。

ちなみにですがtext-overflowflexboxでうまく動作しなことがわかり、css text-overflow ellipsis flexなどで検索をかけると結構な件数がヒットします。
ただ、css text-overflow ellipsis 動作しないとかだとflex関連のものがヒットしないのでハマりました。

解決策

display: flexが原因だとわかれば、あとは検索するだけで、様々な解決法が見つかると思いますが、それで終わりでは丸投げムーブすぎるので、ここでは僕のとった方法を紹介します。

index.html
<div class="text-flex">
  <div class="over-text">
   鳴かぬなら 鳴かせてみよう ホトトギス
  </div>
</div>
style.css
.text-flex {
  display: flex;
  align-items: center;
}

.over-text {
  overflow: hidden;
  white-space: nowrap;
  width: 120px;
  text-overflow: ellipsis;
}

この方法では、text-overflow: elipsisをかけたい要素をdisplay: flexを設定した要素でラップしてあげれば、flexをかけつつ3点リーダー...にできます。

階層が一つ深くなりますが、解決策としてはスタンダードなものだと思います。

最後に

間違っているところがあれば、コメントで教えていただけるとありがたいです。修正しますので。
ただ、執筆者は豆腐メンタルなので誹謗中傷はやめてください(土下座)

[紹介元] CSSタグが付けられた新着投稿 – Qiita CSSだけでハロウィン気分の404ページ作った

コメント

記事に戻る

コメントを残す