cssで長すぎる文字列を三点リーダーで省略する、text-overflow: ellipsis;

cssで長すぎる文字列を三点リーダーで省略する、text-overflow: ellipsis;

cssで長すぎる文字列を省略して末尾を…(三点リーダー)にする、text-overflow: ellipsis;の使い方

DEMO

cssで長すぎる文字列を省略して末尾を…(三点リーダー)にする、text-overflow: ellipsis;の使い方

html

<p class="text-overflow-demo">cssで長すぎる文字列を省略して末尾を…(三点リーダー)にする、text-overflow: ellipsis;の使い方</p>

css

p.text-overflow-demo{
	width: 300px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

今までjsでやらなきゃいけないと思っていたので、cssだけでできるのはとても効率がいいですね!
ただ、複数行はできないのでjsでやることになりそうです。

コメント

タイトルとURLをコピーしました