きり丸の技術日記

技術検証したり、資格等をここに残していきます。

トップ > CSS > HTML, CSSで表示領域を超える文言は3点リーダーの...で省略する（1行、複数行）

HTML, CSSで表示領域を超える文言は3点リーダーの...で省略する（1行、複数行）

CSS 技術

よく使うけど、毎回忘れるので。

環境

  • Chrome

ゴール

  • 表示領域を超えていれば文言を省略する
    • 1行
    • 複数行
  • アイコン + 文言の表示領域でも正しく省略する

f:id:nainaistar:20210822210014p:plain

1行で表示領域を超えていれば文言を省略する

<div style="width:150px;border: 10px solid red">
  <div class="wrap-text">
    ルイズ・フランソワーズ・ル・ブラン・ド・ラ・ヴァリエール
  </div>
</div>
.wrap-text{
    white-space: nowrap; // 折り返さないようにする(1行にする)
    overflow: hidden; // 表示領域を超えたら表示しない
    text-overflow: ellipsis; // 表示領域を超えたら3点リーダにする
    -webkit-text-overflow: ellipsis; // FireFox対応
    -o-text-overflow: ellipsis;  // Opera対応
}

f:id:nainaistar:20210822210032p:plain

複数行で表示領域を超えていれば文言を省略する

<div style="display:flex;width:150px;border: 10px solid yellow">
  <div class="wrap-multitext">
    ルイズ・フランソワーズ・ル・ブラン・ド・ラ・ヴァリエール
  </div>
</div>

※ -webkit-line-clampはInternetExplorerで動かないようなので、ブラウザでちゃんと確認する必要があります。

.wrap-multitext{
    overflow: hidden; 
    display: -webkit-box; // webkitの機能を使うようにする
    -webkit-box-orient: vertical; // 縦に折り返す
    -webkit-line-clamp: 3;  // 3行まで表示する
}

f:id:nainaistar:20210822210057p:plain

アイコン + 文言で表示領域が可変になっても省略する

親のコンポーネントをdisplay: flexを使うだけです。上記例と異なり、アイコンを設定している分の表示領域が少ないのでwidth: 200pxにしています。

CSSについては、上記例で表示したものを使用しています。

<div style="display:flex;width:200px;border: 10px solid black">
  <img src="https://cdn.profile-image.st-hatena.com/users/nainaistar/profile.png?1578837502">
  <div class="wrap-multitext">
    ルイズ・フランソワーズ・ル・ブラン・ド・ラ・ヴァリエール
  </div>
    <img src="https://cdn.profile-image.st-hatena.com/users/nainaistar/profile.png?1578837502">
</div>

f:id:nainaistar:20210822210044p:plain

ソースコード

終わりに

Bootstrap以外でフロントを触ることがなく、FlexBoxをあまり知らなかったのですが、覚えていくと便利ですね。Bootstrapだと細かいマークアップができないので、非常に勉強になりました。

この記事がお役に立ちましたら、各種SNSでのシェアや、今後も情報発信しますのでフォローよろしくお願いします。

参考情報