// css样式
<style type="text/css">
body {
display:flex;
flex-flow: wrap; /* 容器中的子元素会自动换行 */
align-content: flex-start; /* 子元素在容器顶部排列，会解决换行时子元素行间距变大的原因*/
}
.width-self {
width: 200px;
background: blue;
color: white;
padding: 10px;
border: 2px solid red; /* 元素增加边框 */
height:100px;
margin-top: -2px; /* 消除垂直相邻元素边框加粗*/
margin-right: -2px; /* 消除水平相邻袁术边框加粗 */
}
.lineclamp {
width: 100%;
line-clamp:4; /*指定块容器中的行数，需要该属性生效，display、-webkit-box-orient不可缺省, CSS Overflow Module Level 3规范*/
-webkit-line-clamp: 4; /*指定块容器中的行数，需要该属性生效，display、-webkit-box-orient不可缺省*/
display: -webkit-inline-box; /* 必须设置成 -webkit-box或-webkit-inline-box；否则-webkit-line-clamp不生效 */
-webkit-box-orient: vertical; /*必须设置该值，否则-webkit-line-clamp不生效*/
overflow: hidden; /*溢出设置的裁剪方式：不要设置成ellipsis，否则下面会有隐藏的文字显示*/
}
// html内容
<body>
<div class="width-self">
<div class="lineclamp">In this example the <code>-webkit-line-clamp</code> property is set to <code>4</code>, which means the text is clamped after three lines.
An ellipsis will be shown at the point where the text is clamped.
</div>
</div>
<div class="width-self"></div>
<div class="width-self"></div>
<div class="width-self"></div>
<div class="width-self"></div>
<div class="width-self"></div>
<div class="width-self"></div>
<div class="width-self"></div>
<div class="width-self">
<div class="lineclamp">In this example the <code>-webkit-line-clamp</code> property is set to <code>4</code>, which means the text is clamped after three lines.
An ellipsis will be shown at the point where the text is clamped.
</div>
</div>
</body>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
