【CSS】はみ出た文字を「…」で省略表示したい

修正前イメージ

HTML

<div class="container">
  <div class="block hoge">
    hogeぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひ
  </div>
  <div class="block fuga">
    fugaァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒ
  </div>
  <div class="block piyo">
    piyoＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸ
  </div>
</div>

CSS

.container {
  background: pink;
  display: flex;
  flex-wrap: wrap;
}

.block {
  width: 300px;
  height: 25px;
  margin: 5px;
}

.hoge {
  background: red;
}

.fuga {
  background: yellow;
}

.piyo {
  background: green;
}

はみ出た文字を「…」で省略表示(1行)

• overflow: hidden で、はみ出た文字を非表示
• white-space: nowrap で、文字を折り返さないで表示
• text-overflow: ellipsis で、はみ出た文字を省略表示

CSS

.container {
  background: pink;
  display: flex;
  flex-wrap: wrap;
}

.block {
  width: 300px;
  height: 25px;
  margin: 5px;
  overflow: hidden; /* 追加 */
  white-space: nowrap; /* 追加 */
  text-overflow: ellipsis; /* 追加 */
}

.hoge {
  background: red;
}

.fuga {
  background: yellow;
}

.piyo {
  background: green;
}

はみ出た文字を「…」で省略表示(複数行)

• overflow: hidden で、はみ出た文字を非表示
• -webkit-line-clamp で、指定した行数のはみ出た文字に「…」を表示
  • このスタイルを効かせるために、display: -webkit-box -webkit-box-orient: vertical が必要

CSS

.container {
  background: pink;
  display: flex;
  flex-wrap: wrap;
}

.block {
  width: 300px;
  height: 50px; /* 変更(2行ぐらいになるようにした) */
  margin: 5px;
  overflow: hidden; /* 追加 */
  display: -webkit-box; /* 追加 */
  -webkit-box-orient: vertical; /* 追加 */
  -webkit-line-clamp: 2; /* 追加 */
}

.hoge {
  background: red;
}

.fuga {
  background: yellow;
}

.piyo {
  background: green;
}

参考URL

• 文字列を省略して「…」を付与する方法 – CSS/jQuery | DevelopersIO
• -webkit-line-clamp - CSS: カスケーディングスタイルシート | MDN

おわりに

• -webkit-line-clamp のブラウザ互換表を見たところ、主要なものは全部対応しているようだったので問題なさそう