HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

テキスト オーバーフロー

text-overflowプロパティ

テキストが決められた幅に収まらない場合の表示方法を指定します。

  • 初期値

    clip

  • 継承

    不可

  • 適用できる要素

    ブロックコンテナ要素

次のような値を設定することができます。なお、このプロパティの適用を有効にするためにはoverflowプロパティwhite-spaceプロパティを同時に指定する必要があります。

  • clip – テキストが途中であっても、コンテンツの表示領域を出た場合は切り取ります。初期値です。
  • ellipsis – テキストが途中で切り取られた場合、省略記号を表示します。
  • テキスト – ここで指定したテキストはコンテンツとして表示され、もし表示できない場合は切り取られます。2016年7月26日時点では、Firefoxのみ対応しています。

パターン1

上の値の指定例です。3つ目の任意文字はfirefoxのみ対応しており、それ以外のブラウザでは1つ目の「clip」と同じ結果が表示されます。

CSSコード例

.sample_css1 .text1 {
	overflow: hidden;
	width: 80%;
	height: 20px;
	white-space: nowrap;
	text-overflow: clip;
}
.sample_css1 .text2 {
	overflow: hidden;
	width: 80%;
	height: 20px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.sample_css1 .text3 {
	overflow: hidden;
	width: 80%;
	height: 20px;
	white-space: nowrap;
	text-overflow: " -";
}

表示例:

text-overflowプロパティの「clip」指定例です。

text-overflowプロパティの「ellipsis」指定例です。

text-overflowプロパティの任意文字の指定例です。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。