How to set multiple lines to display ellipsis in css-CSS Tutorial-php.cn

How to set multiple lines to display ellipsis in css

青灯夜游

Release： 2021-10-12 17:27:20

Original

24244 people have browsed it

Setting method: 1. Use "overflow:hidden;" to hide the excess part; 2. Use "-webkit-line-clamp:number of lines;" to limit the number of lines of displayed text; 3. Use "text-overflow:ellipsis;" displays ellipses to represent hidden excess.

How to set multiple lines to display ellipsis in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css sets multiple lines beyond the ellipses

Implementation ideas:

1. Use the "overflow:hidden;" statement without Displaying content that exceeds the object size means hiding the excess part;

2. Use the "-webkit-line-clamp: number of lines;" statement to limit the number of lines of displayed text

3 , use the "text-overflow:ellipsis;" statement to hide out-of-range text with the ellipses "..."

Implementation code:

<!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>

Copy after login

Rendering:

How to set multiple lines to display ellipsis in css

Note: Most mobile browsers are based on WebKit core, so this method is suitable for mobile terminals;

# #-webkit-line-clamp Used to limit the number of lines of text displayed in a block element. This is an unsupported WebKit property that does not appear in the CSS draft specification;
display: -webkit-box Display the object as a flexible box model;
-webkit-box-orient Set or retrieve the arrangement of the child elements of the flex box object;

(Learning video sharing:

css video tutorial)

The above is the detailed content of How to set multiple lines to display ellipsis in css. For more information, please follow other related articles on the PHP Chinese website!