精华内容
下载资源
问答
  • less 多行溢出显示省略号无效 js 处理多行文本溢出显示...
    2021-05-25 14:40:40

    用less 写 多行文本溢出处理的时候,会发现根本不起作用:如下

                        overflow: hidden;

                        text-overflow: ellipsis;

                        display: -webkit-box;

                        -webkit-line-clamp: 2;

                        -webkit-box-orient: vertical;

    没找到好的解决办法 建议使用js处理 使用vue的过滤器轻松处理

    献上代码:

    filters: {

            //超过13位显示...

            ellipsis: function(value) {

                if (!value) return '';

                if (value.length > 13) {

                    return value.slice(0, 13) + '...';

                }

                return value;

            },

        },

     

    更多相关内容
  • CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
  • 但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。 WebKit浏览器或移动端的页面 在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接...
  • 文本溢出后很多,会显示一些省略号,这个在很多网站都会这样做,从技术层次来分析有两种,一种是前端通过css或者JavaScript进行进行,还有一种是后端传递文字的时候,本身处理完长度,然后返回一个嗲有省略号的文字...

    文本溢出后很多,会显示一些省略号,这个在很多网站都会这样做,从技术层次来分析有两种,一种是前端通过css或者JavaScript进行进行,还有一种是后端传递文字的时候,本身处理完长度,然后返回一个嗲有省略号的文字。

    而这个放在CSS专栏聊,自然就会聊在CSS 中如何解决这个问题,在CSS中对于行数不同不可以分单行文本溢出和多行文本溢出。

    单行文本溢出

    如果解决文本溢出显示省略号,需要满足的三个条件:

    • 先强制一行内显示文本

      white-space:nowrap;/*默认normal 自动换行*/
      
    • 超出的文本隐藏起来。

      overflow:hidden;
      
    • 文本省略部分替代超出的部分

      text-overflow:ellipsis; /*默认是clip 超出部分直接切除*/
      

    演示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试文档</title>
        <style>
            .d1{
                width: 200px;
                height: 110px;
                border: 1px solid black;
    
    
            }
            img{
                vertical-align: middle;
            }
            .d2{
                width: 90px;
                height: 110px;
                float: right;
                    font-size: 12px;
                font-style: normal;
                line-height: 110px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
         
        </style>
    </head>
    <body>
    <div class="d1" >
        <img src="jpg/ys.png" />
        <div class="d2">芭芭拉黑夜之中竟然被一圈小水球怪物围殴,是道德的的沦丧还是人性的扭曲。</div>
    
    </div>
    </body>
    </html>
    

    在这里插入图片描述

    多行文本溢出

    多行文本溢出显示省略号,有较大的兼容性问题,适合于webkit’浏览器火移动端(移动端大部分是webkit内核。)

    上面的原因也是为什么不建议在前端通过CSS进行设置,而是要求后台返回的数据就是带有省略号的规定内容。

    • 隐藏超出部分

      overflow:hidden;

    • 弹性伸缩盒子模型显示:

      display:-webkit-box;

    • 限制一个块元素显示的文本行数

      -webkit-line-clamp:2;

    • 设置或检索伸缩盒对象的子元素的排列方式

      -webkit-box-orient:vertical;

    演示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试文档</title>
        <style>
            div{
                width: 200px;
                height: 110px;
                border: 1px solid black;
                overflow:hidden;
                display:-webkit-box;
                -webkit-box-orient:vertical;
            }
            .d1{
                -webkit-line-clamp:2;
            }
            .d2{
                -webkit-line-clamp:3;
            }
            .d3{
                 height: 40px;
                -webkit-line-clamp:2;
            }
        </style>
    </head>
    <body>
    <div class="d1">
        芭芭拉黑夜之中竟然被一圈小水球怪物围殴,是道德的的沦丧还是人性的扭曲。
    
    </div>
    
    <div class="d2">
        芭芭拉黑夜之中竟然被一圈小水球怪物围殴,是道德的的沦丧还是人性的扭曲。
    
    </div>
    <div class="d3">
        芭芭拉黑夜之中竟然被一圈小水球怪物围殴,是道德的的沦丧还是人性的扭曲
    
    </div>
    
    </body>
    </html>
    

    在这里插入图片描述

    可以看出多行溢出显示省略号,不但要控制行数,还要让显示文本的宽度和文本行数所占的宽度一样高,而且必须文字的长度要炒作控制行数的行,不然也不会显示省略号,所以很多时候如果通过css实现,有点琐碎。所以通过后台返回文字进行展示,而不是前端修改。

    所以说知道可以实现即可,但是工作中通过后台实现。

    展开全文
  • CSS实现多行文本溢出显示省略号 display: -webkit-box; // 设置弹性伸缩盒子模型 -webkit-box-orient: vertical; // 设置子元素排列方式 -webkit-line-clamp: 3; // 限制在一个块元素显示的文本行数

    CSS实现单行文本溢出显示省略号

    white-space: nowrap;  // 文本不换行
    overflow: hidden;  // 溢出隐藏
    text-overflow: ellipsis;  // 文本溢出显示省略号
    

    效果:在这里插入图片描述

    CSS实现多行文本溢出显示省略号

    display: -webkit-box; // 设置弹性伸缩盒子模型
    -webkit-box-orient: vertical; // 设置子元素排列方式
    -webkit-line-clamp: 3; // 限制在一个块元素显示的文本行数
    overflow: hidden; // 溢出隐藏
    

    效果:在这里插入图片描述

    如果在项目中配置了autoprefixer,webpack打包vue项目时,-webkit-box-orient: vertical; 会被自动忽略。

    在 -webkit-box-orient: vertical 之前添加注释关闭autoprefixer,然后再开启:

    display: -webkit-box; // 设置弹性伸缩盒子模型
    /*! autoprefixer: off */ 
    -webkit-box-orient: vertical; // 设置子元素排列方式
    /*! autoprefixer: on */
    -webkit-line-clamp: 3; // 限制在一个块元素显示的文本行数
    overflow: hidden; // 溢出隐藏
    

    参考文章

    注意:文本容器需要设置宽度width,多行文本要根据实际情况设置高度height。

    展开全文
  • 文本溢出显示省略号分两种情况,单行文本溢出显示省略号(参考上篇文章https://blog.csdn.net/qq_43687594/article/details/123511873),另外一种就是多行文本溢出显示省略号多行文本显示省略号有两种办法 第一...

    文本溢出显示省略号分两种情况,单行文本溢出显示省略号(参考上篇文章https://blog.csdn.net/qq_43687594/article/details/123511873),另外一种就是多行文本溢出显示省略号。

    多行文本显示省略号有两种办法

    第一种: 使用定位伪元素遮盖末尾文字

    步骤:

    1. 给父元素设置:

           overflow: hidden;/* 溢出隐藏 */
           line-height: 20px;/* 设置行高与容器高度成倍数关系,这样避免文本溢出时,文字显示一半 */
           text-align: justify;/* 设置文本对齐方式为两端对齐,这样在伪元素内容遮盖末尾文字时才能对齐*/
           position: relative;/* 子绝父相,这里是为了给伪元素设置定位*/   
      
    2. 给父元素设置伪元素::after ,并为其设置属性:

           content: "...";/* 省略号是放在文本最后面的 */
           width: 1em;/* 设置伪元素的宽度为1em,是为了遮盖的时候正好遮盖中原来的一个字的大小*/
           background-color: pink;/* 设置与父元素相同的背景颜色,同理,也是为了和原来的内容样式保持一致*/
           position: absolute;/*设置定位,其位置就是文本的右下角 */
           right: 0;bottom: 0;
      

    完整代码:

    <!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>
        <style>
            .box{
                width: 200px;/* */
                height: 100px;
                background-color: pink;
                overflow: hidden;/* 溢出隐藏 */
                line-height: 20px;/* 设置行高与容器高度成倍数关系,这样避免文本溢出时,文字显示一半 */
                text-align: justify;/* 设置文本对齐方式为两端对齐,这样在伪元素内容遮盖末尾文字时才能对齐*/
                position: relative;/* 子绝父相,这里是为了给伪元素设置定位*/
            }
            /* 因为省略号是放在文本最后面的,所以使用伪元素after */
            .box::after{
                content: "...";/* 省略号是放在文本最后面的 */
                width: 1em;/* 设置伪元素的宽度为1em,是为了遮盖的时候正好遮盖中原来的一个字的大小*/
                background-color: pink;/* 设置与父元素相同的背景颜色,同理,也是为了和原来的内容样式保持一致*/
                position: absolute;/*设置定位,其位置就是文本的右下角 */
                right: 0;bottom: 0;
            }
        </style>
    </head>
    <body>
        <div class="box">
            我是文本我是文本我是文本我是文我是文我是文我是文我是文我是文我是文我是是文本我是文本我是文本我是文本我是文本我是文本我是文本
        </div>
    </body>
    </html>
    

    实现效果图:
    在这里插入图片描述
    优点: 适用范围广泛。
    缺点: 当内容没有超出容器范围之外时,也会在右下角显示省略号。低版本浏览器不兼容
    缺点的图片解释:
    在这里插入图片描述

    第二种办法: 利用旧版弹性盒

    步骤:

    • 给容器元素类型转换为display:-webkit-box;
    • 设置弹性盒子垂直排列-webkit-box-orient:vertical;
    • 控制要显示的行数-webkit-line-clamp:数值;
    • 溢出隐藏overflow:hidden;

    完整代码:

    <!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>
        <style>
            /* 多行文本溢出隐藏显示省略号方法二:
              兼容性写法,因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端
            */
            .box{
                width: 200px;
                /* height: 100px; 如果设置了高度,且高度超过文本显示行数,在第三行会正常出现省略号,但是三行之后的仍然正常显示*/
                background-color: pink;
                /* 设置高度是行高的倍数,防止文本露出一半 */
                line-height: 20px;
                /* 旧版弹性盒 */
                display: -webkit-box;
                /* 弹性盒子元素垂直排列 */
                -webkit-box-orient: vertical;
                /* 控制要显示的行数 */
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
            
        </style>
    </head>
    <body>
        <div class="box">
            我是文本我是文本我是文本我是文我是文我是文我是文我是文我是文我是文我是是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本
        </div>
    </body>
    </html>
    

    效果图如下:在这里插入图片描述
    优点: 兼容性比较好
    缺点: 如果设置了高度,且高度超过文本显示行数,在第三行会正常出现省略号,但是三行之后的仍然正常显示
    bug图如下:在这里插入图片描述

    展开全文
  • 在css中经常会遇到需要显示多行文字,但文字过多显示不完,就需要用到多行文本溢出显示省略号。 单行文本溢出显示省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 设置了该属性,只会...
  • 多行文本溢出显示省略号(…)

    千次阅读 2021-07-05 16:31:33
    多行展示以省略号(…)处理 在开发过程中会出现大量文字展示情况,一般都会做超过几行,剩余部分按照省略号展示。 单行展示 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行展示 WebKit...
  • 关于多行溢出显示省略号的问题,如果是根据字符的长度个数...一、单行溢出出现省略号显示: <div class="p">张艺兴张艺兴张艺兴张艺兴张艺兴</div> 样式: .p{ width:1rem; overflow:hidden;//超出部分
  • 下面这几行代码可以直接复制到css样式中,实现溢出显示省略号的效果 overflow: hidden; //首先固定宽高,然后让溢出的文字隐藏 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //表示...
  • 多行文本溢出 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 适用范围: 因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端; 注: -webkit-line...
  • 文章目录CSS单行文本以及多行文本显示省略号解决方案单行文本溢出显示省略号多行文本溢出显示省略号第一种效果:仅显示3行文本溢出部分显示省略号第二种效果:仅显示3行文本溢出部分显示省略号,并且鼠标上浮显示...
  • 文本CSS多行溢出隐藏显示省略号

    千次阅读 2021-02-26 15:09:52
    文字溢出隐藏问题
  • 1、单行文本溢出显示省略号 单行文本溢出显示省略号比较简单,设置white-space: nowrap避免换行,再设置text-overflow: ellipse即可。 <style> .single-line { width: 200px; line-height: 1.4; ...
  • 对于文本内容,单行或者多行溢出显示省略号,一般有两种操作方式 Javascript截断操作 Css溢出操作 截断操作 let str = '23048930jsldfjklsdfsdf'; str.length &amp;amp;gt; 6 ? str.splice(0,6) + '...' :...
  •   我要实现的就是这种很小的功能,第一张图中的数据是循环遍历出来的,且class中设置了超出隐藏的效果(多行)。 overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; //设置两行   我刚...
  • <div class="text">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div> <div class="text overOneLine">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试...
  • .body { font-size:14px;... // 显示省略号行数 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; } ​ 转载于:https://www.cnblogs.com/daysme/p/11573889.html
  • 如果实现单行文本的...但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号,如下。 实现方法: display: -webkit-box; -webkit-bo
  • 需求: ie下多行文本超出隐藏显示省略号 解决方案:float布局 代码: html: <div class="fix-height"> <div class="text">这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字...
  • 小程序富文本多行文本溢出省略号ios真机无效问题 之前写小程序遇到富文本多行文本溢出省略号iso无效问题,因为返回的是富文本所以用v-html渲染在页面上,在模拟器上一点问题没有,唯独到了ios真机测试是没效果的,...
  • 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览
  • 前面发过一个关于多行溢出省略号的js方案,有不少人私我 可以加个省略号后面带展开,并且点击展开可以进行展示所有文本。 我今天休息就修改了一下之前的代码,并实现展示功能。简单粗暴,代码如下 : moreline(id...
  • 单行 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行 text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line...
  • uni-app、css 文字自动换行、多行溢出显示省略号
  • CSS多行文本溢出省略显示1、单行文本溢出省略显示2、多行文本溢出省略显示2.1 WebKit内核浏览器解决办法2.2 其他浏览器解决方案2.2.1 定位元素实现多行文本截断 1、单行文本溢出省略显示 实现单行缩略(部分浏览器...
  • 超出一行隐藏显示省略号,相信大家都已经很熟悉了,用css样式来控制,而且没什么兼容性问题 ...多行超出隐藏显示省略号也是可以用css样式来控制的,如下 display: -webkit-box; overflow: hidden; text-ove...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,575
精华内容 3,030
关键字:

多行溢出显示省略号