CSS 样式控制溢出的数据 省略号隐藏

§ 背景

• 近日，在规整界面时，发现有的文字因为长度和行数总是显得不尽如人意，如果考虑到用户在输入文字的随意性因素，就更需要前端进行文字 显示效果的限制了.

♩ a 标签限制行数

• 一般是控制a 标签单行显示时，多余的文字以省略号代替

.a-article-recommend{
    width:100%;
    display:block;
    overflow:hidden;
    word-break:keep-all;
    white-space:nowrap;
    text-overflow:ellipsis;
}

♪ p 标签限制行数

• CSS实现单行、多行文本溢出显示省略号（…）

.p-article-abstract{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

可参考：CSS实现文章

♫ div 限制高度 隐藏溢出的内容

• 有时因为div中的内容过多，会叠加显示，造成布局的混乱，这种情况下，可以尝试进行下面的限制.

.div-article-view{
    height:120px;
    line-height:120px;
    overflow:hidden;
    display:block;
}