2-文本超出2行隐藏

HTML

<div>
  <h2>超出2行文字省略超出2行文字省略超出2行文字省略超出2行文字省略超出2行文字省略</h2>
</div>

CSS

div {
    padding-top: 50px;
    width: 300px;
    height: 300px;
    background: #ccc;
}

h2 {
    display: -webkit-box;   /* 设置display, 将对象作为弹性伸缩盒子模型显示 */
    -webkit-line-clamp: 2;  /* 限制在块元素中显示的文本行数 */
    -webkit-box-orient: vertical; /* 规定子元素水平/垂直排列 */
    overflow: hidden; /* 超出隐藏文本 */
    text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本。 */
}

效果

2.png

参考

有趣的CSS