纯css实现单行以及多行文字省略

最新推荐文章于 2024-07-24 10:23:02 发布

碎碎。

最新推荐文章于 2024-07-24 10:23:02 发布

阅读量487

点赞数 1

分类专栏： css 文章标签：单行文本省略多行文本省略

本文链接：https://blog.csdn.net/weixin_43410419/article/details/86016790

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS 实现单行文字省略

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

CSS实现多行文字省略

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //显示文字的行数
overflow: hidden;
word-break: break-all;

多行文字省略插件：

下载地址： https://github.com/josephschmitt/Clamp.js

//-----------------  单行文字省略CSS 
p{
            width: 400px;
            border: 1px solid #999;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
}
//-----------------  多行文字省略CSS ：ie不兼容
 p {
            width: 400px;
            border: 1px solid #999;
            display: -webkit-box;  
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;  //显示文字的行数
            overflow: hidden;
            word-break: break-all;

        }
//----------------- html
    <p>
    那就随便说点什么吧，反正也只显示一行，可那也得多写点字呀，
    要不字数可不就不够了，字数不够就看不出来情况了。嗯，这回感觉是差不多了，
    看一下是不是只有一行吧
    </p>