CSSでテキストのオーバーフロー部分に省略記号を表示するにはどうすればよいですか? (コード例)-CSSチュートリアル-php.cn

CSSでテキストのオーバーフロー部分に省略記号を表示するにはどうすればよいですか? (コード例)

青灯夜游

リリース： 2019-07-17 14:03:50

オリジナル

46685 人が閲覧しました

Web フロントエンド開発を行うとき、通常、記事のタイトルを取得して 1 行ずつ表示します。ただし、タイトルが長すぎると改行が発生します。また、テキスト情報の一部を表示する場合、すべてを表示するのは煩雑になり、Web エクスペリエンスが低下します。ただし、overflow:hidden を使用すると、幅を超える文字を非表示にすることができます。しかし、結末はいつも少し硬いように思えます。また、表示されていない文字がまだあることを後でユーザーに知らせるのにも役立ちません。最善の方法は、余分な文字を省略記号に置き換えることです。

この章では、CSSを使ってテキストのオーバーフロー部分を楕円表示にする方法を詳しく紹介します。お役に立てれば幸いです。

1: 1 行のテキストがオーバーフローして省略記号が表示されます... (ほとんどの場合、省略記号はタイトルの余分な部分に表示されます...)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS如何使文本溢出部分显示省略号？单行超出</title>
		<style>
			*{margin: 0px;padding: 0px;}
			.box{width: 300px;height: 500px;margin: 50px auto;}
			.overflow{
				width:220px;
				overflow:hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow:ellipsis;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p>
				css 实现单行文本超出长度显示省略号
			</p>
			<p class="overflow">
				css 实现单行文本超出长度显示省略号
			</p>
		</div>
	</body>
</html>

ログイン後にコピー

上記のコードのレンダリングは次のとおりです。

CSSでテキストのオーバーフロー部分に省略記号を表示するにはどうすればよいですか? (コード例)

その中で、white-space: nowrap; は、ラベルに遭遇するまでテキストが折り返されずに同じ行に続くことを意味します。

overflow: hidden;つまり、余分な部分は非表示になります。

text-overflow: ellipsis; テキストオブジェクトのオーバーフローが表示されるとき... もちろん、ドットを表示しないように属性を設定することもできます。 -overflow: Opera ブラウザと互換性を保つため;

2: 複数行のテキストのオーバーフローは省略記号を表示します...

1. CSS 属性設定を直接使用します (-webkit カーネルのみが効果があります)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS如何使文本溢出部分显示省略号？多行超出</title>
		<style>
			*{margin: 0px;padding: 0px;}
			.box{
				width: 280px;
				height: 62px;
				margin: 50px auto;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}
		</style>	
	</head>
	<body>
		<div class="box">
			css 实现多行文本超出长度显示省略号，css 实现多行文本超出长度显示省略号，
			css 实现多行文本超出长度显示省略号
		</div>
	</body>
</html>

ログイン後にコピー

上記のコードのレンダリングは次のとおりです:

その中で、ほとんどのモバイルブラウザは WebKit カーネルに基づいているため、このメソッドはモバイル端末に適しています。ブロック要素に表示されるテキストの行数。これはサポートされていない WebKit プロパティであり、CSS 仕様ドラフトには含まれていません。 -webkit-box はオブジェクトをフレキシブルボックスモデルとして表示します。 orient は、フレキシブルボックスオブジェクトの子要素の配置を設定または取得します。 CSSでテキストのオーバーフロー部分に省略記号を表示するにはどうすればよいですか? (コード例)

text-overflow: 複数行で使用する省略記号テキストの場合、範囲を超えたテキストを非表示にするには、省略記号 "..." を使用します。

2. 疑似クラス

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS如何使文本溢出部分显示省略号？多行超出</title>
		<style>
			*{margin: 0px;padding: 0px;}
			.box{
				width: 280px;
				height: 62px;
				margin: 50px auto;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}
			p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
			p::after{
				content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
				background: -webkit-linear-gradient(left, transparent, #fff 55%);
				background: -o-linear-gradient(right, transparent, #fff 55%);
				background: -moz-linear-gradient(right, transparent, #fff 55%);
				background: linear-gradient(to right, transparent, #fff 55%);
			}
		</style>	
	</head>
	<body>
		<div class="box">
		  <p>
		      css 实现多行文本超出长度显示省略号，
		      css 实现多行文本超出长度显示省略号，
		      css 实现多行文本超出长度显示省略号
		 </p>
		</div>
	</body>
</html>

ログイン後にコピー

を使用する上記のコードのレンダリングは次のとおりです。

このメソッドは幅広い用途に使用できますが、テキストがこの行を超えない場合には省略記号も表示されます。メソッドはjsで最適化できます。

余分なテキストが露出しないように、高さを line-height の整数倍に設定します。 p::after にグラデーションの背景を追加すると、テキストの半分だけが表示されなくなります。 ie6-7 はコンテンツを表示しないため、ie6-7 と互換性を持たせるためにタグを追加する必要があります (例: ...)。ie8 と互換性を持たせるには、次のように置き換える必要があります。 ::after と :after。

3. 絶対配置とパディングを使用する (クロスブラウザーのソリューション)

CSSでテキストのオーバーフロー部分に省略記号を表示するにはどうすればよいですか? (コード例)