長い文章を省略したい
概要を表示させるときに、文章が長すぎて、一部を省略したい。
そして、スクロールバーで全表示とかは困る。
なので、折返し地点で折り返さずに、省略するCSSを書きたい。
text-overflow: ellipsis
テキストが端に来たら三点リーダ(…)で省略されます。
<div class="base_box overflow-ellipsis"> ああああああああああああああいいいいいいいいいいいいいううううううううううううううううう </div>
.base_box {
width: 100px;
}
.overflow-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
- 親要素のwidthで、最大幅を指定する
- white-space: nowrap; で折り返さないようにする
- overflow: hidden; で端まで来たら消えるようにする
- text-overflow: ellipsis; で、端まで来た際に表示させる内容を決める
省略する時の文字を変える場合は、
text-overflowを変えると良いのがわかると思います。
codepenをおいておくので、参考にφ(･･
