CSSで複数行のリンクテキストを省略表示し、3点リーダーの色を変更する方法

はじめに

テキストを複数行表示して「...」で省略するようなUIを実装することがありました。

テキストを省略して表示するとき、overflow: hidden;、white-space: nowrap;、text-overflow: ellipsis;を組み合わせて実装していましたが、これは1行のみの場合でしか使用できないようです😱

CSSで実装する方法を調べたので、備忘録として残しておきます。

結論

CSSで複数行のリンクテキストを省略表示し、3点リーダーの色を変更する方法

.truncateUrlText {
  width: 400px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #1a0dab; 
}

a {
  color: #1a0dab;
}

背景

実務で、以下の要件を満たすようなUIを実装することになリました。

要件

• テキストを表示する要素の幅は400px
• テキストは最大2行、入りきらない場合は3点リーダー「...」で省略する
• 文字の色は#1a0dab
• テキストを各ページへのリンクにする

実装

例として、「夏目漱石/坊ちゃん」の冒頭の文章を省略して表示します。
テキストはこちらへのリンクにします。

CSSで複数行のリンクテキストを省略表示する方法

まずは画面にテキストを表示します。
次にReact Routerの<Link>を使ってテキストをリンクにしました。

import { Link } from "react-router-dom";

export default function App() {
  return (
   <div className="truncateUrlText">
      <Link
        to="https://www.aozora.gr.jp/cards/000148/files/752_14964.html"
        target="_blank"
      >
        親譲おやゆずりの無鉄砲むてっぽうで小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰こしを抜ぬかした事がある。なぜそんな無闇むやみをしたと聞く人があるかも知れぬ。別段深い理由でもない。
      </Link>
    </div>
  );
}

続いて、テキストを省略して表示するためのCSSを指定します。

.truncateUrlText {
  width: 400px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

a {
  color: #1a0dab;
}

結果は以下のようになりました。

「よし、できた!!🎉」 と思ったのですが…

よくみると、3点リーダー「...」の文字色だけが指定した#1a0dabに変わっていません😱😱😱

3点リーダー「...」の文字色を変える方法

3点リーダーの文字色を変更するためには、親要素にも色を指定する必要があるようです。
以下のようにCSSを修正しました。

.truncateUrlText {
  width: 400px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
+ color: #1a0dab; /* 親要素にも色を指定 */
}

a {
  color: #1a0dab;
}

これで無事に要件を満たすことができました🎉

終わりに

地味に苦戦したCSSでした。意外と使う機会は多そうなので覚えておきます。

参考