表示領域を超えたテキストの省略表現

概要

• 表示領域を超えたテキストを「…」で省略する。
• グラデーションを使ってぼかしてみる。
• ボックスシャドウを使う。

方法

• overflow: hiddenとtext-overflow: ellipsis の併用。
• 末尾に背景色と同じ色のグラデーション（透明度のみ変化させる）をつけて重ねる。
• 疑似要素を使い、ぼかし付きの影を表示領域の下側につける。

サンプルコード

• 実行サンプル

<h1>一行表記</h1>
<div class="single-line">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eos facilis odio enim delectus numquam accusantium officia repudiandae vero vel.</div>

<h1>複数行</h1>
<div class="multi-line">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eos facilis odio enim delectus numquam accusantium officia repudiandae vero vel.</div>

<h1>Flex + グラデーション</h1>
<ul class="flex">
  <li class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sunt asperiores voluptatibus commodi, cum veniam. Enim consectetur nobis quibusdam soluta quasi reiciendis atque, doloribus, tempora consequuntur autem neque esse reprehenderit.</li>
  <li class="inner">Lorem ipsum dolor aaa sit amet, consectetur adipisicing elit. Rem, sunt asperiores voluptatibus commodi, cum veniam. Enim consectetur nobis quibusdam soluta quasi reiciendis atque, doloribus, tempora consequuntur autem neque esse reprehenderit.</li>
  <li class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. cc Rem, sunt asperiores voluptatibus commodi, cum veniam. Enim consectetur nobis quibusdam soluta quasi reiciendis atque, doloribus, tempora consequuntur autem neque esse reprehenderit.</li>
  <li class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sunt asperiores voluptatibus commodi, cum veniam. Enim consectetur nobis quibusdam soluta quasi reiciendis atque, doloribus, tempora consequuntur autem neque esse reprehenderit.</li>
  <li class="inner">あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</li>
  <li class="inner">ああああああああああああああああああああああああaああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</li>
</ul>

<h1>box-shadow</h1>
<div class="shadow">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit animi voluptates inventore numquam quasi ex amet aliquam unde quae voluptatem, qui necessitatibus totam, autem temporibus, eum, aut ipsum suscipit officia repellendus beatae hic obcaecati error iure. Quaerat animi aut debitis nesciunt maxime ad, explicabo minima dicta tempore incidunt, voluptates soluta beatae quidem dolores temporibus asperiores eaque excepturi aperiam culpa itaque id blanditiis quos at sit. Odio voluptatibus voluptatem, maiores facilis maxime quibusdam quaerat ex non adipisci dolorem. Omnis nostrum inventore repellat iste pariatur maiores amet vitae et, repudiandae itaque voluptate hic iusto, aliquid alias odit ex est quia delectus vero.
</div>

h1 {
  font-weight: bold;
  font-size: 20px;
}

h1 ~ h1 {
  margin-top: 20px;
}

.single-line {
  width: 500px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi-line {
  overflow: hidden;
  width: 500px;
  height: 32px;
  position: relative;
}

.multi-line:after {
  position: absolute;
  background: #FFFFFF;
  padding-right: 60px;
  content: "...";
  right: 0;
  bottom: 0;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.inner {
  margin-top: 20px;
  flex-basis: 300px;
  max-height: 30px;
  overflow: hidden;
  position: relative;
}

.inner:after {
  background: rgba(255, 255, 255, 0) linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #FFFFFF 80%);
  position: absolute;
  content: "";
  padding-right: 10px;
  width: 50px;
  height: 13px;
  right: 0;
  bottom: 0;
}

.shadow {
  width: 300px;
  height: 80px;
  margin-top: 20px;
  overflow: hidden;
  position: relative;
}

.shadow:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 16px;
  bottom: 0;
  left: 0;
  box-shadow: 0 -6px 18px 3px #FFFFFF inset;
}

外部リンク

• 幅を越えた文字列を三点リーダー（…）で省略（複数行対応）
• 
  【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ