CSS プロパティ text-overflow を ellipsis にするとテキストが溢れた際に省略記号を表示することができます。
2行以上表示させてから省略記号を付けたい場合は、-webkit-line-clamp というプロパティを使うことで実現できます。
解決すること
限られたスペースの中で1行でテキストを表示する必要があるときに、文字数が多くなってしまって端の文字が切れてしまい不格好になってしまったという経験はありませんか?
そのような時にテキストの末尾を省略記号「…」で置き換えることができるCSSプロパティがあります。
解決方法 1: ellipsis
を適用する
ブロックコンテナー要素に ellipsis
クラスをセットするとテキストが溢れた際に末尾が「…」になります。テキストは折り返しされないため、1行での表示になります。
- <div class="ellipsis">春は、あけぼの。やうやう白くなりゆく山ぎは少し明りて紫だちたる雲の細くたなびきたる。</div>
- ellipsis {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- }
text-overflow
は溢れた際にどう表示するかを指定するプロパティです。規程では clip
が指定されていて、溢れた部分は切り取られます。これ ellipsis
に指定すると省略記号「…」を表示するようになります。
- text-overflow: ellipsis;
text-overflow
はテキストが溢れることを強制するものではないためそれだけでは役に立ちません。overflow
と white-space
をそれぞれ hidden
, nowrap
に指定することで、テキストの溢れを生じさせることができるようになります。
- overflow: hidden;
- white-space: nowrap;
プロパティのまとめ
text-overflow: ellipsis; | テキストが溢れてそれが表示されない際に、ボックスに収まったテキストの末尾に省略記号「…」を表示する。 |
overflow: hidden; | テキストがボックスから溢れた際にボックスに合わせて切り取ります。 |
white-space: nowrap; | テキストを折り返さず1行にします。 |
解決方法 2: -webkit-line-clamp
を使う(IE未対応)
ellipsis
による方法は1行でしかテキストを表示することができませんでした。Internet Explorer をサポートしないのであれば、2行以上の表示で 省略記号を表示させることができます。
- <div class="line-clump-3">春は、あけぼの。やうやう白くなりゆく山ぎは少し明りて紫だちたる雲の細くたなびきたる。夏は、夜。月の頃はさらなり。闇もなほ。螢の多く飛び違ひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。</div>
- .line-clump-3 {
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 3;
- overflow: hidden;
- }
-webkit-line-clamp
プロパティで表示したい最大の行数を指定します。
- -webkit-line-clamp: 3;
-webkit-line-clamp
は、display
プロパティに -webkit-box
もしくは -webkit-inline-box
が設定されており、かつ -webkit-box-orient
プロパティに vertical
が設定されている組み合わせのときのみ使用できます。
- display: -webkit-box;
- -webkit-box-orient: vertical;