css怎么设置超出显示省略号

云言 • 2022-12-04 • 前端开发 • 1148 阅读
css设置超出显示省略号的方法：

1、使用“overflow:hidden;”语句把超出的部分隐藏起来；

2、使用“text-overflow:ellipsis;”语句在文本溢出包含元素时，显示省略符号来代表被隐藏的部分。

css设置超出显示省略号可分两种情况

  • 单行文本溢出显示省略号...
  • 多行文本溢出显示省略号...

但使用的核心代码是一样的：需要先使用“overflow:hidden;”来把超出的部分隐藏，然后使用“text-overflow:ellipsis;”当文本超出时显示为省略号。

  • overflow：hidden;不显示超过对象尺寸的内容，就是把超出的部分隐藏了；
  • text-overflow：ellipsis;当文本对象溢出是显示...，当然也可是设置属性为clip不显示点点点；

实现代码：

1.单行文本溢出显示省略号...

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<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>

2.多行文本溢出显示省略号...

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<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多行文本超出长度显示省略号，css多行文本超出长度显示省略号。
		</div>
	</body>

</html>

 

|| 版权声明
作者：云言
链接：https://yyink.cn/archives/356.html
声明：如无特别声明本文即为原创文章仅代表个人观点，版权归《云言博客》所有，欢迎转载，转载请保留原文链接。
THE END
分享
二维码
海报
css怎么设置超出显示省略号
css设置超出显示省略号的方法： 1、使用“overflow:hidden;”语句把超出的部分隐藏起来； 2、使用“text-overflow:ellipsis;”语句在文本溢出包含元素时，显示省略……
<<上一篇
下一篇>>