精华内容
下载资源
问答
  • 前端的文本溢出隐藏解决方案
    2021-08-05 17:55:45

    一、css方法

    1.当希望文本只保留一行时
            
                white-space:nowrap;/*强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。*/
                overflow: hidden;/*超出部分隐藏*/
                text-overflow: ellipsis;/*隐藏部分以省略号代替*/
    2.当文本需要保留多行时
            a.webkit内核浏览器(谷歌,Safarim,QQ浏览器)情况下
                overflow: hidden;/*超出部分隐藏*/
                text-overflow:ellipsis;/*隐藏部分以省略号代替*/
                display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
                -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性*/
                -webkit-box-orient: vertical;/*子元素垂直排列*/
            b.其他浏览器的兼容方案
                    li{
                        position:relative;
                        line-height:20px;
                        max-height:40px;
                        overflow:hidden;
                        width: 200px;
                        border: 1px solid red;
                    }
                    li:after{
                        content: "...";
                        position:absolute;
                        bottom:0;
                        right:0;
                        padding-left:40px;
                        background:linear-gradient(to right,transparent,#fff 55%);
                    }

    二、js文本溢出隐藏方案

    clamp.js插件

    var module = document.getElementById("wrapper");
        $clamp(module, {clamp: 3});
        clamp (Number | String | 'auto') 
                    number: 行数;
                    string: px;
        useNativeClamp(Boolean)
                    在受支持的浏览器(即webkit内核浏览器),默认为true,
                    但有时它会不稳定,因此可以将其设置为false来使用基于JavaScript的解决方案。
        truncationChar (String)
                    执行截断后在HTML元素末尾插入的字符。这默认为省略号(…)
        splitOnChars (Array)
                    确定要将元素块分为较小部分的字符,['.', ',', ' ']即标点符号,它将首先删除句子,然后删除逗号短语,然后删除单词,最后删除单个字符,试图找到正确的高度。
    这会在删除较大文本段(如段落)时提高性能和减少循环。默认设置为['.', '-', '–', '—', ' ']。
        truncationHTML(String)
                    在截断字符之前要插入的HTML字符串。如果想要添加一个“读取更多”链接或类似的东西在末尾,可以使用此属性。

    更多相关内容
  • 文本溢出隐藏

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

    在不用过滤器的情况,直接通过设置 css 样式使文本溢出隐藏:

    vue 框架中可以用 filter 过滤器;微信小程序中可用该方法进行设置。

     1.单行文本溢出隐藏: 

    text{
      display:block;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

     2.多行文本溢出隐藏:

    text{
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clap:2; //设置2行溢出隐藏
    }

     

    展开全文
  • 单行文本溢出隐藏、多行文本溢出隐藏,省略号代替

    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设置多行文本溢出隐藏效果

    多行文本溢出隐藏

      /* 多行文本溢出隐藏,省略号代替 */
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical; /* 设置对齐模式 */
      -webkit-line-clamp: 2;
    

    在这里插入图片描述

    展开全文
  • CSS单行、多行文本溢出隐藏 1.单行文本溢出隐藏 .class{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } 在这里需要注意的是overflow只能作用于块级元素身上,如果我们对内联元素进行如上...
  • 实现: .text{ display: -webkit-box; /*弹性伸缩盒子模型显示*/ -webkit-box-orient: vertical; /*排列方式*/ -webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/ ... /*溢出隐藏*/ }
  • .txt { width: 100%; height: 50px; display: -webkit-box; /* 弹性盒模型*/ -webkit-line-clamp: 2;... /* 溢出隐藏*/ word-break: break-all; /* 允许在单词内换行 解决只有英文才能换行,中文无法换行问题,*
  • 单行文本溢出隐藏: overflow: hidden; 单行文本溢出隐藏显示省略号: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 多行文本溢出隐藏显示省略号: text-overflow: -o-ellipsis-lastline; ...
  • css以下都需要设置元素宽度单行文本overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多行文本webkit、ff或移动端(不兼容IE)overflow : hidden;text-overflow: ellipsis;/* 将对象作为弹性伸缩盒子...
  • 一,css-单行文本溢出隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
  • 单行文本溢出显示省略号 1.设置宽度 width:*px; 2.设置强制不换行 white-space:nowrap; 3.设置溢出隐藏 overflow:hidden; 4.设置溢出的标识为省略号 text-overflow:ellipsis; <style> p{ width: 100...
  • 单行文本溢出隐藏: overflow: hidden; 单行文本溢出隐藏显示省略号: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 多行文本溢出隐藏显示省略号: text-overflow: -o-ellipsis-last...
  • 单行文本超出隐藏: 在这里插入代码片 overflow: hidden; text-overflow:ellipsis;.../*文本溢出时显示省略标记*/ display:-webkit-box;/*设置弹性盒模型*/ -webkit-line-clamp:3; -webkit-box-orient:vertical;
  • 设置单行文本溢出隐藏
  • 思路获取目标文本行高line-height,内容高度offsetHeight假设 2 行文本溢出隐藏内容高度除以行高大于2,则加上溢出隐藏的css类名css代码.text{line-height:14px;overflow:hidden;}.texter{height:28px;}.texter:...
  • CSS实现文本溢出隐藏

    千次阅读 2020-04-25 16:49:51
    CSS实现文本溢出用省略号代替,在不同的页面宽度下,我们想要保证页面的布局不被打乱,那么我们就要对溢出的文字进行隐藏。 1、单行溢出的文字隐藏 overflow一定不要忘记了!!! 我们一起来看看效果 2、多行溢出...
  • .txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; word-break: break-all; text-justify: newspaper...}.
  • 父级 .orders .goods .txt { width: 0; flex: 1; } 子级 .orders .goods .txt h5 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
  • 1.单行文本溢出隐藏用省略号代替 display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;/*设置为省略号显示*/ 2.多行文本溢出隐藏用省略号代替 /*多行文本溢出隐藏,省略号代替*/...
  • 单行文本溢出, 隐藏并显示 … .box{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 单多行文本溢出, 隐藏并显示 … .box{ display: -webkit-box; /* 指定行数*/ -webkit-line-clamp: 2...
  • 单行文本溢出隐藏且省略号代替 实例: 单行文本隐藏溢出用省略号代替写法:三件套 1、设置文本不换行 white-space: nowrap; 2、设置溢出部分隐藏 overflow: hidden; 3、设置溢出部分用省略号代替 text-...
  • 文本溢出隐藏变成省略号 1.单行文本溢出隐藏变成省略号 1.文本不换行强制文本在一样显示 white-space: nowrap; 2.溢出隐藏 overflow: hidden; 3.文字溢出部分变成省略号… text-overflow: ellipsis; <!DOCTYPE ...
  • flex 宽度自适应,文本溢出隐藏方法 <div class="out"> <div class="left"> 我是图片 </div> <div class="right"> <p>我是文字我是文字我是文字我是文字</p> <div&...
  • css的单行、多行文本溢出隐藏

    千次阅读 2020-05-12 13:43:16
    1、多行文本溢出隐藏 .hidden{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } 2、单行文本溢出隐藏 .hidden{ overflow: hidden; text-overflow:...
  •  /* 单行溢出隐藏 */ width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 多行: div{  /* 多行溢出隐藏 */ width: 150px; ...
  • 在前端开发以及小程序开发中,单行,多行文本溢出隐藏经常用到。接下来我就把我知道的几种情况整理出来以供大家参考。 微信小程序 多行text文本溢出隐藏 display: -webkit-box; word-break: break-all; -webkit-box-...
  • 之前百试百灵的代码,在这次却不生效了,找了半天都没找到失效原因,唉,惆怅。 附上之前的代码: overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,105
精华内容 14,042
关键字:

文本溢出隐藏