单行省略号、多行省略号

以你之姓@ 2023-06-05 12:53 52阅读 0赞

##### 单行： #####

p {
        width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

##### 多行： #####

div {
        width: 50px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; // 显示的行数
        overflow: hidden;
      }

##### 全部代码： #####

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>测试</title>
    </head>
    <style>
      div {
        width: 50px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; // 显示的行数
        overflow: hidden;
      }
    
      p {
        width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    </style>
    
    <body>
    
      <p>打算的萨达四大</p>
      <div>
        大声道撒大所大所大所多撒大所多撒大所大
        大声道撒大所大所大所多撒大所多撒大所大
        大声道撒大所大所大所多撒大所多撒大所大
      </div>
    </body>
    
    </html>

##### 效果如下： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]: /images/20230601/3cc07681126d4f47b528cd24286a03f4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，52人围观）

还没有评论，来说两句吧...

相关阅读

相关单行省略号、多行省略号

单行： p { width: 50px; overflow: hidden; text-overflow: ell

以你之姓@/ 2023年06月05日 12:53/ 0 赞/ 53 阅读

相关单行及多行文本超出出现省略号

1、单行超出 .text-overflow{ width:300px; text-overflow: ellipsis; white-

你的名字/ 2023年05月30日 06:30/ 0 赞/ 136 阅读

相关 CSS3 - 文本超出隐藏显示省略号（单行 / 多行）

单行如果实现单行文本的溢出显示省略号（…）应该都知道用 `text-overflow:ellipsis` 属性来，当然还需要加宽度 `width` 属来兼容部分浏览。

系统管理员/ 2023年03月01日 12:38/ 0 赞/ 87 阅读

相关 vue设置多行省略号

一、前言在网上找了很多css多行省略号，虽然模拟器有用，但是在手机浏览器上虽然有省略号，但是下一行还是有多余的字显示，这显然不是所想要的，这有可能涉及到兼容性问题，所以

桃扇骨/ 2023年02月21日 06:28/ 0 赞/ 35 阅读

相关 css单行、多行文字溢出显示省略号

1、单行文字溢出显示省略号：style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" 部分浏览

痛定思痛。/ 2022年07月14日 11:44/ 0 赞/ 335 阅读

相关 div或者p标签单行和多行超出显示省略号

单行文本溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap;

本是古典何须时尚/ 2022年05月09日 12:34/ 0 赞/ 199 阅读

相关 div或者p标签单行和多行超出显示省略号

单行文本溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowra

偏执的太偏执、/ 2022年05月09日 09:38/ 0 赞/ 199 阅读

相关单行文本省略号设置方法

一、单行文本省略号设置必须满足以下四个条件，缺一不可： 1.固定的宽度 width : value; 2.强制在一行显示 white-space:nowrap; 3

野性酷女/ 2022年04月01日 12:46/ 0 赞/ 462 阅读

相关小程序文本溢出显示省略号（单行/多行）

1.单行：外部容器应加overflow: hidden;否则不显示省略号 .text { font-size: 38rpx;

拼搏现实的明天。/ 2022年03月29日 03:57/ 0 赞/ 388 阅读

相关 react 单行多行文本溢出显示省略号...

文本溢出处理单行文本溢出单行文本溢出，可直接用css处理，很简单 .ellipsis { overflow: hidden; ...

红太狼/ 2020年11月07日 03:55/ 1 赞/ 919 阅读