テキストを改行しないで末尾に「…」を付けて省略表示する

テキストを改行せずに末尾を省略して表示する

前後の要素と高さを揃えたいときや表示エリアが限られているとき、CSSのtext-overflowプロパティを使う以下のようにテキストを自動的に省略して1行に収めることができます。

こちらのサンプルでは、記事一覧の記事タイトルであるh2要素に対してtext-overflowプロパティを指定し、親要素の幅より広い場合にテキストを自動的に省略する指定をしています。
また、text-overflowプロパティ単体では効かないため、overflowプロパティとwhite-spaceプロパティも併せて指定する必要があります。

CSS コード例

.sample1 h2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  padding: 14px 20px;
  width: 100%;
  font-size: 16px;
  line-height: 1.6;
}

上記サンプルのCSSとHTMLの全体のコードは下記の内容になります。
CSSは外部ファイルとしてHTMLが読み込む前提で分けて記述します。

CSS コード例

.sample1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  margin: 100px auto;
  width: 1000px;
}
.sample1 h1 {
  margin-bottom: 40px;
  width: 100%;
  font-size: 18px;
  text-align: center;
}
.sample1 article {
  margin-bottom: 30px;
  width: 30%;
  background: #f0f0f0;
}
.sample1 a {
  color: #333;
  text-decoration: none;
  transition: opacity .3s ease;
}
.sample1 a:hover {
  opacity: 0.7;
}
.sample1 figure {
  max-width: 100%;
}
.sample1 figure img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
.sample1 h2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  padding: 14px 20px;
  width: 100%;
  font-size: 16px;
  line-height: 1.6;
}

HTML コード例

<section class="sample1">
  <h1>記事一覧</h1>
  <article>
    <a href="#">
      <figure><img src="./images/thumb01.jpg" alt="記事サムネイル"></figure>
      <h2>こちらは表示確認用のテキストです。こちらは表示確認用のテキストです。</2>
    </a>
  </article>
  <article>
    <a href="#">
      <figure><img src="./images/thumb02.jpg" alt="記事サムネイル"></figure>
      <h2>Here is the just text for display confirmation.</2>
    </a>
  </article>
  <article>
    <a href="#">
      <figure><img src="./images/thumb03.jpg" alt="記事サムネイル"></figure>
      <h2>こちらは表示確認用のテキストです。こちらは表示確認用のテキストです。</2>
    </a>
  </article>
  <article>
    <a href="#">
      <figure><img src="./images/thumb04.jpg" alt="記事サムネイル"></figure>
      <h2>Here is the just text for display confirmation.</2>
    </a>
  </article>
  <article>
    <a href="#">
      <figure><img src="./images/thumb01.jpg" alt="記事サムネイル"></figure>
      <h2>こちらは表示確認用のテキストです。こちらは表示確認用のテキストです。</2>
    </a>
  </article>
  <article>
    <a href="#">
      <figure><img src="./images/thumb02.jpg" alt="記事サムネイル"></figure>
      <h2>Here is the just text for display confirmation.</2>
    </a>
  </article>
  <article>
    <a href="#">
      <figure><img src="./images/thumb03.jpg" alt="記事サムネイル"></figure>
      <h2>こちらは表示確認用のテキストです。こちらは表示確認用のテキストです。</2>
    </a>
  </article>
  <article>
    <a href="#">
      <figure><img src="./images/thumb04.jpg" alt="記事サムネイル"></figure>
      <h2>Here is the just text for display confirmation.</2>
    </a>
  </article>
  <article>
    <a href="#">
      <figure><img src="./images/thumb01.jpg" alt="記事サムネイル"></figure>
      <h2>こちらは表示確認用のテキストです。こちらは表示確認用のテキストです。</2>
    </a>
  </article>
</section>

仕様上はtext-overflowプロパティは省略記号を「…」以外の文字も指定できたり、フェードアウト（fade）が指定できるようになっていますが、2023年11月時点ではブラウザが対応していないため他の記号は指定しても表示されません。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。