flexbox内でtext-overflowが効かない

flexbox内でtext-overflowが効かない現象に遭遇したので、対応方法をメモしておきます。

サンプルコード

下記サンプルのように、.flex-itemに対してtext-overflowを指定している場合、中のテキストは省略されます。

HTML

<div class="flex">
	<div class="flex-item">ほげ</div>
	<div class="flex-item text-overflow">テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</div>
</div>

CSS

.flex {
	display: flex;
}
.flex-item {
	padding: 10px;
	border: #ccc 1px solid;
}
.flex-item:nth-child(2) {
	flex-grow: 1;
}
.text-overflow {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.flex-itemに対して指定した場合のデモページ
 

上記サンプルを少し変更して、.flex-itemの子要素に対してtext-overflowを指定した場合、テキストの省略がされません。

HTML

<div class="flex">
	<div class="flex-item">ほげ</div>
	<div class="flex-item">
		<p class="text-overflow">テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
	</div>
</div>

.flex-itemの子要素に対して指定した場合のデモページ
 

対応方法としては、text-overflowの要素が入っている.flex-itemに対して、min-width: 0;を指定するといいようです。

CSS

.flex-item:nth-child(2) {
	flex-grow: 1;
	min-width: 0;
}

対応後のデモページ
 

もしくは、.flex-itemにoverflow: hidden;を指定でも対応できます。

CSS

.flex-item:nth-child(2) {
	flex-grow: 1;
	overflow: hidden;
}

対応後のデモページ2
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年6月
 12345
6789101112
13141516171819
20212223242526
27282930