色々なホームページで、以下のように表示しきれないテキストの部分をドット「...」に置き換えているのをよく目にするのではないでしょうか。
1行の場合
これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。
2行以上の場合
これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。
このように入りきらない末尾を「...」に置き換えることで、閲覧者に続きの文があるのだと分かってもらえます。
対象の文が1行の場合
まず対象の文をどのくらいの横幅に収めたいのかを指定するために、 文を収納している要素に対して横幅(width)を指定してください。
次にその要素に対して、以下のCSS文を適用します。
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
3行目の"overflow:ellipsis;"が省略符号を表示するプロパティとなります。
このCSSを適用することで以下のように省略符号が付きます。
これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。
ただしこのCSS文では表示される分は1行のみで、あとは省略されてしまいます。
次に、行を複数行表示させたい場合について解説します。
対象の文が2行以上の場合
複数行表示させたい場合は"-webkit-"を用います。
※webkitを使用する為、Chrome以外の特定のOSでは「...」が表示されない場合があります。
1行の場合と同様、まず文を収納している要素に対して横幅(width)を指定してください。
次にその要素に対して、以下のCSS文を適用します。
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp: 2;
overflow:hidden;
text-overflow:ellipsis;
この時、3行目の"-webkit-line-clamp"の部分で表示させたい行数を指定できます。
また、1行表示の時にはあった"white-space:nowrap;"を削除している点に注意してください。
このCSSを適用することで以下のように指定した行数が表示された後、省略符号に置き換わります。
-webkit-line-clamp: 2;
これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。
-webkit-line-clamp: 3;
これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。
これで省略符号「...」を付けることができました！限られた領域内にテキスト文を表示する際はかなり便利な機能なので、 みなさんも是非お試しください！
