テキストの文字数制限（文字数を超えた場合の…表示）は、以前までphpなどで行う必要がありましたが、
現在は簡単にCSSで設定する事ができます。
CSSの文字数制限
設定するのは下記です。
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
と
width:の設定です。
設定例
「あああああ～」テキストに250PXの幅で文字数制限を設定します。
あああああああああああああああああああああああああああ
#sample1 {
width:250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
あああああああああああああああああああああああああああ
幅250PXで…表示になりました。
複数行の文字数省力はCSSでは難しい
複数行の文字数制限は、現時点は難しいです。
GOOGLE Chromeとsafariのみの限定は可能です。
対応する場合は、下記の設定で行えます。
#sample2{
text-overflow: ellipsis;
overflow : hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
見えなくするだけなら、
height
overflow : hidden;
で設定が可能です。
レスポンシブデザインでテキストの省略、文字数制限を行う場合はwidthに%を設定してみましょう。
例
#sample3 {
width:90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
