对于这样的要求
在单行显示文字的时候，设置元素的高度没有意义，影响文字显示长度的是元素的宽度。
一般完成这样的显示需要3个属性来完成：
（width:50px）可以忽略~
- overflow: hidden说明超出元素大小后隐藏内容
- text-overflow: ellipsis 说明文字内容超出后以...的方式来显示
- white-space: nowrap 该属性规定段落中的文本不进行换行，因为这个设置所以不用担心height属性对元素的影响。
原码：
<style>
.text{
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="text">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈好好好好好好好好好好好好好好好
</div>
</body>
在多行显示文字的时候，不用设置元素的高度，因为下面会有属性来规定显示的行数，此时是高度和宽度一起影响内容的展示效果。
完成这样的显示需要4个属性来完成：
- display:-webkit-box 设置成盒模型
- -webkit-box-orient:vertical 用来确定父容器里子容器的排列方式，可以选择是水平排列还是垂直排列一般默认是水平排列
- -webkit-box-clamp:number 后面设置的number是显示的行数
- text-overflow: hidden指超出后用省略号表示
原码：
<style>
.text{
width: 100px;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
</style>
</head>
<body>
<div class="text">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈好好好好好好好好
好好好好好好好
</div>
</body>
网友评论