Css长段落文字隐藏显示省略号

最新推荐文章于 2024-11-15 15:30:13 发布

大厂乱杀程序猿

最新推荐文章于 2024-11-15 15:30:13 发布

阅读量449

点赞数

CC 4.0 BY-SA版权

分类专栏： html 移动端文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/AWDSDF/article/details/126752473

html 同时被 2 个专栏收录

2 篇文章

订阅专栏

移动端

2 篇文章

订阅专栏

Css长段落文字隐藏显示省略号

1.多行显示

 /* 需要设置父容器宽高 */
    p {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 8; /* 要显示的文字行数 */
      overflow: hidden; /* 溢出部分隐藏 */
    }

2.在一行显示

 /* 需要设置父容器宽高 */
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; /* 只对中文起作用，强制换行。 */
      word-break: break-all; /* 只对英文起作用，以字母作为换行依据。 */
      word-wrap: break-word; /* 只对英文起作用，以单词作为换行依据。 */
    }

3.完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* 需要设置父容器宽高 */
    p {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 8; /* 要显示的文字行数 */
      overflow: hidden; /* 溢出部分隐藏 */
    }
    /* 一行省略 */
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; /* 只对中文起作用，强制换行。 */
      word-break: break-all; /* 只对英文起作用，以字母作为换行依据。 */
      word-wrap: break-word; /* 只对英文起作用，以单词作为换行依据。 */
    }
  </style>
  <body>
    <div style="width: 200px; height: 200px">
      <p>
        ss 文字超出部分显示省略号佾舞于庭 159
        设置table固定布局，否则自适应布局会不受控制 table{ 　　table-layout:
        fixed; } 单行文字 ： overflow: hidden; text-overflow:ellipsis;
        white-space: nowrap; CSS 强制不换行，多出的文字显示省略号
        { white-space: nowrap;
        text-overflow:ellipsis; overflow:hidden; } 注释： white-space: nowrap;
        文本强制不换行； text-overflow:ellipsis; 文本溢出显示省略号；
        overflow:hidden; 溢出 css实现多行省略号多行省略号 7-12
        那么利用css如何实现多行省略号呢?利用-webkit-line-clamp属性(WebKit的CSS扩展属性-WebKit是私有属性)是可以实现的,但是只适用于webkit浏览器和移动端。另外可以利用伪类配合定位实现,这个兼容性好一些。
        利用-webkit-line-clamp属性(WebKit...
        ...多行文本溢出显示省略号(…s多... 7-28
        //超出一行省略号 white-space: nowrap; //禁止换行 overflow: hidden;
        text-overflow: ellipsis; //... 二、多行超出显示省略号
        a.对于内核是webkit的浏览器(Google/Safari),可以直接用CSS样式;
        溢出隐藏:overflow: hidden; 省略... css样式：文字多变省略号
        301 一下三行代码： //以下三行代码是文字太多变三行
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; css
        实现文字一行显示，多出部分显示省略号
      </p>
    </div>
  </body>
</html>