css控制文字溢出...

也无风雨丶

已于 2024-09-18 10:19:24 修改

阅读量246

点赞数

分类专栏： CSS 文章标签： CSS 单行文字溢出点点点

于 2018-10-30 22:29:44 首次发布

本文链接：https://blog.csdn.net/foradmin/article/details/83550040

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、单行文本

利用overflow实现单行文字溢出...效果：


{
    text-overflow：clip|ellipsis|string; 
    white-space:nowrap;
    overflow:hidden;
}

clip: 直接修剪文本，文本末端可能会出现字符显示不全的现象。

ellipsis：用省略号来代替修剪的文本。

string: 用给定的字符串来代替修剪的文本（只在火狐浏览器有效）。

2、多行文本

{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-clamp: 3;
    overflow: hidden;
}

3、兼容性写法

p {
    position: relative;
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
}

p::after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 40px;
    background: -webkit-line-gradient(left, transparent, #fff 55%);
    background: -moz-line-gradient(right, transparent, #fff 55%);
    background: -o-line-gradient(right, transparent, #fff 55%);
    background: line-gradient(to right, transparent, #fff 55%);
}