css 实现div内一行显示，超出部分用省略号代替，css 实现div内显示两行或三行，超出部分用省略号显示
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 实现div内一行显示，超出部分用省略号代替，css 实现div内显示两行或三行，超出部分用省略号显示相关的知识，希望对你有一定的参考价值。
css 实现div内一行显示，超出部分用省略号代替，css 实现div内显示两行或三行，超出部分用省略号显示
css 实现div内一行显示，超出部分用省略号代替
注意为了实现效果，不要设置高度
div
width: 200px;
background-color: #ccc;
.div1
overflow: hidden;/* 内容超出裁剪 */
white-space : nowrap; /* 文本属性：不支持换行 */
text-overflow: ellipsis;/* 文本超出当前后属性，属性值ellipsis多余部分使用省略号 */
css 实现div内显示两行或三行，超出部分用省略号显示
overflow: hidden;
/* 内容超出裁剪 */
text-overflow: ellipsis;
/* 文本超出当前，多余部分使用省略号 */
display: -webkit-box;
/* 必须结合的属性:特别显示模式 ，将对象作为弹性伸缩盒子模型显示 。 */
-webkit-line-clamp: 3;
/* 显示的行数 */
-webkit-box-orient: vertical;
/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
描述源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#demo
width: 400px;
height: 400px;
background-color: #ccc;
position: relative;
.div1
position: absolute;
left: 100px;
color: antiquewhite;
width: 200px;
/* height: 400px; */
background-color: rgb(88, 91, 151);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
</style>
</head>
<body>
<div id="demo">
<div class="div1">
显示两行或三行，多出部分用省略号显示
显示两行或三行，多出部分用省略号显示
显示两行或三行，多出部分用省略号显示
显示两行或三行，多出部分用省略号显示
显示两行或三行，多出部分用省略号显示
显示两行或三行，多出部分用省略号显示
</div>
</div>
</body>
</html>
说明：
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box;
必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient :vertical;
必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
以上是关于css 实现div内一行显示，超出部分用省略号代替，css 实现div内显示两行或三行，超出部分用省略号显示的主要内容，如果未能解决你的问题，请参考以下文章
div+css怎么显示两行或三行文字，然后多出的部分省略号代替？？