概要
CSSプロパティ「text-overflow」は、テキストが表示領域をはみ出したときの振る舞いを指定することができます。代表的な例としては、省略符号（…）を付与するケースがあります。
<p class="ellipsis">テキストが指定の幅を超えた場合、省略符号が付与されます。</p>
<style>
p {
width: 300px;
background-color: #def;
}
.ellipsis {
overflow: hidden; /* 領域をはみ出した文字を隠す */
white-space: nowrap; /* 文字の折り返しを行わない */
text-overflow: ellipsis;
}
</style>また、複数行の文末には適用できませんので、その場合は一部ブラウザのみですが、 -webkit-line-clamp を使用するケースもあります。
値
| 値 | 説明 |
|---|---|
| clip | 領域をはみ出したテキストを省略 |
| ellipsis | 領域をはみ出したテキストの末尾に省略符号（...）がつきます |
| "任意の文字" | 領域をはみ出したテキストの末尾に任意の文字が挿入される（一部ブラウザのみ） |
実用における注意点
このプロパティは 折り返しの効くテキストには適用できませんので、width、overflow、white-space を組み合わせて使用します。
<p class="ellipsis">テキストが指定の幅を超えた場合、省略符号が付与されます。</p>
<p class="no-ellipsis">テキストが指定の幅を超えた場合、折り返されてしまうので、省略符号が付与されません。</p>
<style>
p {
width: 300px;
background-color: #def;
}
.ellipsis {
overflow: hidden; /* 領域をはみ出した文字を隠す */
white-space: nowrap; /* 文字の折り返しを行わない */
text-overflow: ellipsis;
}
.no-ellipsis {
text-overflow: ellipsis;
}
</style>使用例
<p class="ellipsis">テキストが指定の幅を超えた場合、省略符号が付与されます。</p>
<p class="clip">テキストが指定の幅を超えた場合、すべて切り取られます</p>
<p class="custom">任意の省略符号が付与されます。任意の省略符号が付与されます。</p><style>
p {
width: 300px;
background-color: #def;
margin-bottom: 10px;
overflow: hidden;
white-space: nowrap;
}
.ellipsis {
text-overflow: ellipsis;
}
.clip {
text-overflow: clip;
}
.custom {
text-overflow: '任意の文字をいれます'; /* firefoxなど一部のブラウザのみ */
}
</style>