纯CSS 实现当文字溢出时自动隐藏并在结尾添加省略号“…”

相关css样式解析:

  • white-space: nowrap;     // 使盒子中的内容不能换行显示,这样会造成内容在水平方向上溢出
  • overflow: hidden;            // 使溢出盒子的内容隐藏起来
  • text-overflow: ellipsis;     // 当内容溢出时再内容结尾添加省略号“…”

样例图片:

css实现文字溢出隐藏结尾添加省略号

 

样例代码:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
	   .box {
		      width: 300px;
		      padding: 10px;
		      background-color: #000;
		      color: #fff;

		      white-space: nowrap;
		      text-overflow: ellipsis;
		      overflow: hidden;
	   }
    </style>
</head>
<body>
    <div class="box">我爱北京天安门,天安门上太阳升,伟大领袖毛主席,指引我们向前进</div>
</body>
</html>