CSSで複数行に省略記号を表示するように設定する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSで複数行に省略記号を表示するように設定する方法

青灯夜游

Oct 12, 2021 pm 05:27 PM

css

設定方法: 1. 余分な部分を非表示にする場合は「overflow:hidden;」を使用します; 2. 表示するテキストの行数を制限する場合は「-webkit-line-clamp:number of lines;」を使用します; 2. 3. "text-overflow:ellipsis;" を使用すると、隠れた余分な部分を表す省略記号が表示されます。

CSSで複数行に省略記号を表示するように設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css は、楕円を越えて複数の行を設定します。

実装アイデア:

1.「overflow:hidden;」を使用します。オブジェクトサイズを超えるコンテンツを表示するということは、余分な部分を非表示にすることを意味します;

2. 表示されるテキストの行数を制限するには、「-webkit-line-clamp: 行数;」ステートメントを使用します

3 、「text-overflow:ellipsis;」ステートメントを使用して、範囲外のテキストを省略記号「...」で非表示にします。

実装コード:

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

レンダリング:

CSSで複数行に省略記号を表示するように設定する方法

注: ほとんどのモバイルブラウザは WebKit コアに基づいているため、この方法はモバイル端末に適しています。

# #-webkit-line-clamp ブロック要素に表示されるテキストの行数を制限するために使用されます。これはサポートされていない WebKit プロパティであり、CSS ドラフト仕様には含まれていません。
display: -webkit-box オブジェクトをフレキシブルボックスモデルとして表示します;
-webkit- box-orient フレックスボックスオブジェクトの子要素の配置を設定または取得します;

(学習ビデオ共有:

css ビデオチュートリアル)

以上がCSSで複数行に省略記号を表示するように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。