CSSでテキストまるめ処理

長い文字列を省略して表示する

Rails

truncate というメソッドがありました。文字数を指定して文字列をまるめてくれます。

"20文字以上のテキストは、20文字で切り捨てられる".truncate(20)
=> "20文字以上のテキストは、20文字..."

CSS

CSSで行うと、文字列は幅に合わせて自動的に切り捨ててくれます。

.text-overflow{
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
<p class="text-overflow">文字列は幅に合わせて自動的に切り捨てられるのです。</p>

表示結果

文字列は幅に合わせて自動的に切り捨てられるのです。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA