Web前端学习—基础篇(27)_文本溢出处理如何处理、如何让单行文本显示省略号、如何让多行文本显示省略号

4.22、文本溢出处理

text-overflow属性

• text-overflow: clip;/* 溢出裁剪 */
• text-overflow: ellipsis;/* 溢出显示省略号 */
• text-overflow: string;/* 溢出内容用字符串表示，仅在火狐浏览器中有效 */

text-overflow属性需要与white-space:nowrap;和overflow:hidden;组合使用才会有效

4.22.1、单行文本溢出显示省略号

.box{
    width:;/* 限定元素宽度 */
    white-space: nowrap;/* 强制不换行 */
    overflow: hidden;/* 溢出隐藏 */
    text-overflow: ellipsis;/* 溢出显示省略号 */
}

4.22.2、多行文本溢出显示省略号

• 使用webkit的css扩展属性——只有在webkit内核中才有效

.wrap1{
    width:;
    overflow: hidden;
    text-overflow: ellipsis;

    display: -webkit-box;/* 将元素设置为弹性伸缩盒 */
    -webkit-line-clamp: 3;/* 显示文本的行数 */
    -webkit-box-orient: vertical;/* 设置弹性伸缩盒中子元素的排列方式 */
}

• 使用伪元素模拟溢出显示省略号——兼容性较好

.wrap{
    width:;
    overflow: hidden;

    height: 90px;/* 高度是行高的倍数 */
    line-height: 30px;

    position: relative;
}
.wrap::after{
    content: "...";
    position: absolute;
    right: 5px;
    bottom: 0;
    background: #fff;
    padding: 0 5px 0 2px;
}