CSS | テキストを折り返さず、はみ出し部分を非表示にする方法

2022-01-23CSS テキスト,CSS

テキストを折り返さず、はみ出し部分を非表示にする方法を紹介しています。

テキストを折り返さず、はみ出し部分を非表示にする

テキストを折り返さず、はみ出し部分を非表示にする表示サンプルとCSSのサンプルコードになります。

See the Pen CSS | First letter styling by yochans (@yochans) on CodePen.

対象のテキストにpタグ、コンテナ部分になる親要素のclass名に「.container」を指定しています。

<div class="container">
	<p>Hide text overhang</p>
</div>

テキストを折り返さない設定にする為に「white-space」プロパティに「nowrap」を指定します。

このままでは折り返さない部分も描画され、スクロールバーが表示されてしまいますので親要素に「overflow」プロパティで「hidden」を指定して、はみ出す子要素を非表示にします。

これでテキストを折り返さず、親要素からはみ出る部分を非表示にする事が可能です。

.container {
	padding: 10px;
	width: 200px;
	background: #000;
	white-space: nowrap;
	overflow: hidden;
}

.container p {
	margin: 0;
	font-size: 34px;
	color: #4169e1;
}