できない.dev

CSSでflex の中のテキストを省略表示するには

flex の子要素の中でテキストを … で省略するには、省略するテキストを包む flex アイテムに min-width: 0 を指定して、中身の長さまで縮まなくなる初期値を解除する。

公開:

プレビュー
<div class="row"><span class="avatar"></span><div class="body"><p class="title">山田さんから新しい見積書が届いています。内容を確認して返信してください。</p></div><span class="badge">新着</span></div>
<div class="row"><span class="avatar"></span><div class="body"><p class="title">確認をお願いします</p></div><span class="badge">新着</span></div>
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  padding: 10px;
  background: #f1f5f9;
  margin-bottom: 8px;
  border-radius: 6px;
  font: 14px system-ui;
}
.avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #94a3b8;
}
.badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 99px;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
}
.body {
  flex: 1;
  min-width: 0;
}
.title {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

省略するテキストを包む flex アイテムに min-width: 0 を指定する。
flex アイテムは初期値の min-width: auto のままだと中身の長さより縮まないため、text-overflow: ellipsis を書いてもテキストが切られずに行ごと外へはみ出すためである。

つまずき

white-space: nowrap・overflow: hidden・text-overflow: ellipsis の 3 点を書いても、display: flex の行の中では省略されないことがある。

flex アイテムの min-width の初期値は auto で、中身をこれ以上縮められない幅（折り返さないテキストならその全長）より小さくならない。

  • 省略したいテキストを div などで包み、その div が flex アイテムになっている
  • 包んでいる側の min-width が auto のままで、テキストの全長を下限にしてしまう
  • 結果として、アイテムが親の幅を超えて伸び、右隣の要素も外へ押し出される

包んでいる flex アイテムに min-width: 0 を足すと、親の幅に合わせて縮み、中のテキストが省略される。

できない例: flex アイテムに min-width を指定しない
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  padding: 10px;
  background: #f1f5f9;
  border-radius: 6px;
  font: 14px system-ui;
}
.avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #94a3b8;
}
.badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 99px;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
}
.body {
  flex: 1;
}
.title {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
できる例: flex アイテムに min-width: 0 を足す
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  padding: 10px;
  background: #f1f5f9;
  border-radius: 6px;
  font: 14px system-ui;
}
.avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #94a3b8;
}
.badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 99px;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
}
.body {
  flex: 1;
  min-width: 0;
}
.title {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

アイテム自身に overflow を付ける場合

省略するテキスト自身が flex アイテムなら、min-width: 0 は要らない。
overflow が hidden・auto・scroll のアイテムはスクロールコンテナになり、min-width: auto が 0 として扱われるためである。

overflow: clip はスクロールコンテナを作らないので、この場合は 0 にならず省略されない。

min-width: 0 が必要になるのは、省略する要素と flex アイテムの間に div などが 1 段はさまっているときだけだ。

overflow: hidden を付け忘れると、アイテムは縮まず、はみ出した文字が切られないまま省略記号も出ない。

できる例: 省略するテキスト自身が flex アイテム
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  padding: 10px;
  background: #f1f5f9;
  border-radius: 6px;
  font: 14px system-ui;
}
.avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #94a3b8;
}
.badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 99px;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
}
.title {
  flex: 1;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
できない例: overflow: hidden を付け忘れる
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  padding: 10px;
  background: #f1f5f9;
  border-radius: 6px;
  font: 14px system-ui;
}
.avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #94a3b8;
}
.badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 99px;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
}
.title {
  flex: 1;
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

grid でも同じ

grid では 1fr が minmax(auto, 1fr) の意味になるため、列の下限が中身の長さになり、同じ現象が起きる。

列の指定を minmax(0, 1fr) に変えると、下限が 0 になって省略が効く。

できない例: 1fr のまま
.grid {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  max-width: 280px;
  padding: 10px;
  background: #f1f5f9;
  border-radius: 6px;
  font: 14px system-ui;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #94a3b8;
}
.title {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
できる例: minmax(0, 1fr) にする
.grid {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  max-width: 280px;
  padding: 10px;
  background: #f1f5f9;
  border-radius: 6px;
  font: 14px system-ui;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #94a3b8;
}
.title {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

このコードで動いた？