精华内容
下载资源
问答
  • css文本溢出
    2022-02-16 19:32:43

    单行文本溢出

    • text-overflow:规定当文本溢出时,显示省略符号来代表被修剪的文本
    • white-space:设置文字在一行显示,不能换行
    • overflow:文字长度超出限定宽度,则隐藏超出的内容

    overflow设为hidden,普通情况用在块级元素的外层隐藏内部溢出元素,或者配合下面两个属性实现文本溢出省略

    white-space:nowrap,作用是设置文本不换行,是overflow:hiddentext-overflow:ellipsis生效的基础

    text-overflow属性值有如下:

    • clip:当对象内文本溢出部分裁切掉
    • ellipsis:当对象内文本溢出时显示省略标记(...)

    text-overflow只有在设置了overflow:hiddenwhite-space:nowrap才能够生效的

    .text{
        overflow: hidden;
        width: 40px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    多行文本溢出

    高度截断

    伪元素 + 定位

    核心的css代码结构如下:

    • position: relative:为伪元素绝对定位
    • overflow: hidden:文本溢出限定的宽度就隐藏内容)
    • position: absolute:给省略号绝对定位
    • line-height: 20px:结合元素高度,高度固定的情况下,设定行高, 控制显示行数
    • height: 40px:设定当前元素高度
    • ::after {} :设置省略号样式
    <style>
        .demo {
            position: relative;
            line-height: 20px;
            height: 40px;
            overflow: hidden;
        }
        .demo::after {
            content: "...";
            position: absolute;
            bottom: 0;
            right: 0;
            padding: 0 20px 0 10px;
        }
    </style>

    行数截断

    css实现也非常简单,核心的css代码如下:

    • -webkit-line-clamp: 2:用来限制在一个块元素显示的文本的行数,为了实现该效果,它需要组合其他的WebKit属性)
    • display: -webkit-box:和1结合使用,将对象作为弹性伸缩盒子模型显示
    • -webkit-box-orient: vertical:和1结合使用 ,设置或检索伸缩盒对象的子元素的排列方式
    • overflow: hidden:文本溢出限定的宽度就隐藏内容
    • text-overflow: ellipsis:多行文本的情况下,用省略号“…”隐藏溢出范围的文本
    <style>
        p {
            width: 400px;
            border-radius: 1px solid red;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>

    更多相关内容
  • 主要介绍了vue实现移动端项目多行文本溢出省略功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 不值一提的 flex-basis ,却给文本溢出添加省略号这个小小的功能带来很多了麻烦。下面来演示一下。 1. flex 家族 flex 里有很多的属性,我们经常用到的就是如下操作: .container { display: flex; } .container >...
  • 但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。 WebKit浏览器或移动端的页面 在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接...
  • CSS--文本溢出完美样式,CSS--文本溢出完美样式,CSS--文本溢出完美样式
  • 文本溢出是一个非常常见的问题,尤其是在手机端上 (此图片来源于网络,如有侵权,请联系删除! ) 这是理想中的状态,但是对于长标题来说,可能就要崩溃了 轻者换行 (此图片来源于网络,如有侵权,请联系删除! ) 重者...
  • 如果实现单行文本溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览
  • 主要介绍了文本溢出插件jquery.dotdotdot.js使用方法详解,需要的朋友可以参考下
  • CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
  • 单行文本与多行文本溢出时显示省略号的CSS设置
  • 在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断判断是基于行数还是基于高度?这些问题之下,...
  • 本文给大家分享html文本溢出显示省略字符的两种常用解决方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
  • 复制代码代码如下:<!...<head><meta charset=”UTF-8″>...当文本对象溢出是显示…,当然也可是设置属性为clip不显示点点点;-o-text-overflow:为了兼容opera浏览器;*/width:200px;overflow:hidd
  • 主要介绍了CSS实现限制字数功能当对象内文本溢出时显示省略标记,需要的朋友可以参考下
  • NULL 博文链接:https://qiaohhgz.iteye.com/blog/1664352
  • 目录单行文本溢出多行文本溢出拓展的多行文本溢出自定义多行文本溢出高亮多行文本溢出 单行文本溢出 width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 兼容性一片绿呀,基本上所有...

    单行文本溢出

    在这里插入图片描述

    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    

    兼容性一片绿呀,基本上所有的浏览器都支持
    在这里插入图片描述

    多行文本溢出

    在这里插入图片描述
    这个效果也可以通过 css 来实现

    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    

    如果将 display: -webkit-box 和 text-overflow: ellipsis 配合使用,文本将以省略号结尾。

    line-clamp 设置文本显示的行数

    box-orient 设置元素的排列方式

    但是如果我们输入的内容是英文,如下图所示:
    在这里插入图片描述
    我们会发现英文没有如我所愿,显示 3 行。因为英文是不会自动换行的,所以我们需要设置换行

    word-wrap: break-word; //允许长单词换行到下一行
    word-break: break-all; //允许在单词内换行
    

    效果如下
    在这里插入图片描述
    兼容性:该方法不适用于 IE 浏览器。
    在这里插入图片描述
    在这里插入图片描述
    改变思路采用定位+伪类方法

    div {
      position: relative;
      line-height: 20px;
      max-height: 60px;
      overflow: hidden;
      word-break: break-all;
    }
    
    div::after {
      content: "...";
      position: absolute;
      bottom: 0;
      right: 0;
      padding-left: 40px;
      background: -webkit-linear-gradient(left, transparent, #fff 55%);
      background: -o-linear-gradient(right, transparent, #fff 55%);
      background: -moz-linear-gradient(right, transparent, #fff 55%);
      background: linear-gradient(to right, transparent, #fff 55%);
    }
    
    • 使用 line-height 和 max-height 来限制显示的行数,word-break 是设置英文单词允许单词内换行;
    • 在::after 中使用 background: linear-gradient 而不直接使用 background 可以避免文字显示不全的问题;
    • ::after 在 ie8 不支持可以采用:after,如果在 ie6,7 时,::after 可以换成真实元素来替换如
      效果如下:
      在这里插入图片描述
      兼容性
      在这里插入图片描述
      在这里插入图片描述
      也可以使用封装好的库clamp-js-main[2]
      npm i clamp-js-main
    <script src="./node_modules/clamp-js-main/clamp.js"></script>
    <script>
        $clamp(document.getElementById('app'),{clamp:3});
    </script>
    

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

    拓展的多行文本溢出

    在支持了多行文本溢出显示省略号的功能之后,产品同学又发现体验不友好的点,如下图所示,文本在第二行开头处就结束了,这就导致第二行大部分是空白的内容,影响了美观度。

    在这里插入图片描述
    因此,产品同学提出了一个新需求:

    • 当文本没有超过第 x 行的一半时,则按第 x-1 行溢出显示省略号的方式展示;(第 1 行除外)

    • 当文本超过第 x 行的一半但没有超过第 x 行时,则正常展示;

    • 当文本超过第 x 行时,则按第 x 行溢出显示省略号的方式展示。
      这就需要计算出文本实际占用的宽度才能选择采用哪种展示方式。

    查找资料得知,canvas 提供了一个measureText的方法,该方法的返回包含一个对象,这个对象里包含了以像素计的指定字体宽度。

    于是可以基于canvas能力来实现这个功能,大概的流程图如下图所示。
    在这里插入图片描述这里最关键的是要计算出每一行可以显示多少文本,利用 canvas 的 measureText 方法,可以达到这个效果,代码如下

    <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
    
    //处理文字多出省略号显示
    function dealWords(options) {
      options.ctx.font = options.fontSize + "px Arial";//设置字体大小
      var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//实际总共能分多少行
      var count = allRow >= options.maxLine ? options.maxLine : allRow;//实际能分多少行与设置的最大显示行数比,谁小就用谁做循环次数
    
      var endPos = 0;//当前字符串的截断点
      let textArr = [];
      for (var j = 0; j < count; j++) {
        var nowStr = options.word.slice(endPos);//当前剩余的字符串
        var rowWid = 0;//每一行当前宽度
        if (options.ctx.measureText(nowStr).width > options.maxWidth) {//如果当前的字符串宽度大于最大宽度,然后开始截取
          for (var m = 0; m < nowStr.length; m++) {
            rowWid += options.ctx.measureText(nowStr[m]).width;//当前字符串总宽度
            if (rowWid > options.maxWidth) {
              if (j === options.maxLine - 1) { //如果是最后一行
                textArr.push(nowStr.slice(0, m - 1) + '...');
                options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 18);    //(j+1)*18这是每一行的高度
              } else {
                textArr.push(nowStr.slice(0, m))
                options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 18);
              }
              endPos += m;//下次截断点
              break;
            }
          }
        } elseif (options.ctx.measureText(nowStr).width > options.maxWidth / 2 && options.ctx.measureText(nowStr).width < options.maxWidth) {//如果当前的字符串宽度小于最大宽度就直接输出
          textArr.push(nowStr.slice(0));
          options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 18);
        } else {
          if (j > 0) {
            if (options.ctx.measureText(nowStr).width < options.maxWidth / 2) {
              document.getElementById('myCanvas').height = 150;
              options.ctx.font = options.fontSize + "px Arial";//设置字体大小
              textArr.push(nowStr.slice(0));
              for (let n = 0; n < textArr.length - 1; n++) {
                if (n == j - 1) {
                  options.ctx.fillText(textArr[n].slice(0, textArr[n].length - 1) + "...", options.x, options.y + (n + 1) * 18);
                } else {
                  options.ctx.fillText(textArr[n], options.x, options.y + (n + 1) * 18);
                }
    
              }
            }
          }else{
            options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 18);
          }
        }
      }
    }
    
    var ctx = document.getElementById('myCanvas').getContext('2d');
    var name = '前端简报,前端简报,前端简报,前端简报,前端简报,前端简报,前端简报,前端。。';
    this.dealWords({
      ctx: ctx,//画布上下文
      fontSize: 18,//字体大小
      word: name,//需要处理的文字
      maxWidth: 300,//一行文字最大宽度
      x: 0,//文字在x轴要显示的位置
      y: 0,//文字在y轴要显示的位置
      maxLine: 3//文字最多显示的行数
    })
    

    效果图 当文本没有超过第 x 行的一半时,则按第 x-1 行溢出显示省略号的方式展示;(第 1 行除外)

    图片

    当文本超过第 x 行的一半但没有超过第 x 行时,则正常展示;

    在这里插入图片描述

    当文本超过第 x 行时,则按第 x 行溢出显示省略号的方式展示。

    在这里插入图片描述

    兼容性

    在这里插入图片描述

    自定义多行文本溢出

    过一段时间之后,产品同学又提出了新的进阶版需求

    • 文本的首行开头需要缩进或者可以配置一个图标;

    • 文本的末尾可以配置按钮或者图标,并且如果文本超过了范围需要显示省略号,但是省略号需要在按钮或图标的前面。
      类似于如图所示:
      在这里插入图片描述
      推荐两个封装好的组件

    HeyUI:https://www.heyui.top/component/other/textellipsis

    vue-text-ellipsis:https://github.com/Luobata/vue-text-ellipsis

    它们的思路都是通过最终展示的实际高度是否超过预期的容器高度来判断是否需要删减文本。其流程图大概如下图所示。
    在这里插入图片描述
    就这样,通过现成的组件就解决了一个难题。

    高亮多行文本溢出

    有些文本表达的意思可能比较重要,这就需要重点引起用户的注意。

    而有些文本表达的意思可能重要程度一般,这就不需要用户注意。

    于是乎她们又提出了一个通过高亮文本来提升用户体验的需求:

    • 能够根据文本的标记进行高亮展示

    比方说,获取到下面一段文本,它要显示出入下图所示的那样高亮效果
    在这里插入图片描述
    由于文本高亮需要通过标签将文本包裹起来并添加高亮样式才能实现,而之前的组件是通过 v-text 的方式实现的,因此这里不能直接使用,需要将组件改造成 v-html 的方式插入才可以。

    假如通过 v-html 插入文本,并且设置了 em 标签的样式,那么就会有一个问题,组件是通过循环剔除最后一个字符直到实际高度小于容器高度来实现展示功能的,这就有可能截掉标签字符,导致最后的展示有异常。

    所以,在截取文本的时候还需要做一些处理,流程图如下图所示。
    在这里插入图片描述
    到这里,已经实现文本的一种高亮形式了,但是假如有好几个部分的文本需要高亮且高亮的样式还各不相同,这又要怎么解决呢?

    一种思路是,通过几种不同名称的标签分别包裹需要高亮的文本,每一种标签会对应一种高亮样式,这样的话,在获得源文本后,首先通过词法分析将源文本中的标签解析出来,后面的流程就跟上图步骤 1 后面的流程类似了

    展开全文
  • 大家经常用的css3属性text-overflow是针对单行文本溢出的操作,那块级元素的文本溢出要怎样处理呢? 需要用到-webkit-line-clamp:
  • 文本溢出显示省略号分两种情况,单行文本溢出显示省略号(参考上篇文章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图如下:在这里插入图片描述

    展开全文
  • QTableWidget item文本显示不全的通过气泡提示出来,如果item内容是完全显示的则气泡不会出现。只有显示不全时气泡才会出现。效果图:https://blog.csdn.net/qq_41622002/article/details/111224339
  • 单行文本溢出隐藏、多行文本溢出隐藏,省略号代替

    1.单行文本溢出

    效果

    代码(overflow失效的话,要加display)

    .scrollItem text {
      font-size: 26rpx;
      /* 单行文本溢出隐藏 省略号代替 */
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    
     
    }

    2.多行文本溢出,

    效果

     

    代码

    .scrollItem text {
      font-size: 26rpx;
      
      /* 多行文本溢出隐藏 省略号代替*/
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical; /*设置对其模式,纵向对齐*/
      -webkit-line-clamp: 2; /*设置多行的行数*/
    }

    展开全文
  • css文本溢出处理

    2021-06-12 00:45:45
    文本溢出处理1. 单行文本溢出显示省略号overflow:hidden; (顾名思义超出限定的宽度就隐藏内容)white-space: nowrap; (设置文字在一行显示不能换行)text-overflow: ellipsis;(规定当文本溢出时显示省略符号来代表被...
  • 文本溢出隐藏

    2021-08-07 15:06:14
    在不用过滤器的情况,直接通过设置 css 样式使文本溢出隐藏: vue 框架中可以用 filter 过滤器;微信小程序中可用该方法进行设置。 1.单行文本溢出隐藏: text{ display:block; white-space:nowrap; ...
  • html文本溢出

    2021-07-31 11:48:36
    溢出属性(容器的) overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit; visible:默认值,内容不会被修剪,会呈现在元素框之外; hidden:内容会被修剪,并且其余内容是不可见的; scroll:内容会被...
  • 目前文本溢出的处理可以使用css实现单行及多行溢出显示省略号,但是兼容性可能不太好。 最近我发现一个兼容性比较广的方法,那就是getClientRects,大家可以点击链接查看完整的介绍。 这里简单介绍一下,对于块元素...
  • 多行文本溢出问题的解决 我们都知道单行文本的溢出问题的解决办法,就是: 1.使用宽度with,来限制宽度 2. 使用white-space:nowrap/pre来强制限制换行; 3. 使用overflow:hidden隐藏溢出文本;...
  • HTML文本溢出效果

    2021-06-11 01:31:35
    【前期准备】① 导入jQuery文件;JS-Lamda-Overflowp{padding: 0;margin: 0;}.outer{width: 300px;height: 80px;line-height: 20px;overflow: hidden;}Lorem ipsum dolor sit amet, consectetur adipisicing elit....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 95,218
精华内容 38,087
关键字:

文本溢出

友情链接: TestImage.zip