CSS-通过css来实现单行或者多行文本移除显示省略号('...')

最新推荐文章于 2024-07-21 20:35:12 发布

wust_cyl

最新推荐文章于 2024-07-21 20:35:12 发布

阅读量3.6k

点赞数 1

分类专栏： HTML/CSS 文章标签： CSS-通过css来实现单行或者多行文本移除显示省略号('.

本文链接：https://blog.csdn.net/wust_cyl/article/details/80344871

版权

本文介绍了如何使用CSS实现单行和多行文本在溢出时显示省略号的效果。对于单行文本，通过结合`white-space`、`text-overflow`和`overflow`属性可以轻松实现。对于多行文本，提供了两种方法，一种适用于WebKit浏览器，另一种则需要指定高度并利用伪元素定位来完成。

摘要由CSDN通过智能技术生成

单行文本：

我们看一下如下效果

这种情况随处可见，实现起来也很简单。

  <p>
      友情，能够随时说话找一个能随时随地和你聊天的人真的很难。
  </p>

p{
      width:10em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

white-space:规定段落中的文本不进行换行

text-overflow 属性规定当文本溢出包含元素时发生的事情。

clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。

多行文本：

我们看一下如下效果

仅通过css实现的话有俩个方法

方法一

    div {
      width:500px;
      disp

关注

专栏目录