单行文本、多行文本显示省略号...

一、单行文本

  .box { width: 200px;

      overflow: hidden;

      text-overflow:ellipsis;

      white-space: nowrap;

     }

二、多行文本

1. csss实现,适用于webkit内核浏览器、移动端、微信可以,火狐不可以

    .box {

       width: 200px;

       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       overflow: hidden;

           }

  2. js实现,适用于所有浏览器,原理是截取指定字数的文字

    vue项目用于过滤器:

      filters: {
        //处理多行文本...
        //示例 {{text | ellipsis(35)}} 35为限制字数
        ellipsis(text,num) {
          if(text.length > num){
              return text.substring(0, num) + ‘...‘;
            }else {
              return text;
            }
        },

      }

    jq项目:

      // 文字超出显示...
      //示例 ellipsis(‘.box‘,86);
      function ellipsis(box, num) {
         $(box).each(function () {
           if ($(this).text().length > num) {
             $(this).text($(this).text().substring(0, num) + ‘…‘);
           }
         });
      }

  

原文地址:https://www.cnblogs.com/zhangruiqi/p/11434336.html

时间: 2024-10-11 06:50:30

单行文本、多行文本显示省略号...的相关文章

CSS控制文本超出指定宽度显示省略号和文本不换行

一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) :需与overfl

HTML5[6]:多行文本显示省略号

CSS3新增text-overflow: ellipse; 只支持单行文本 如果是多行文本, 在无法完全显示的情况下,可以按下面这样写: overflow:hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

单行多行文字溢出显示省略号

1. 单行文字 <div class='line'>我是单行文字测试我是单行文字测试我是单行文字测试我是单行文字测试</div> .line{ width:200px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; } white-space:nowrap; (强制显示一行)overflow:hidden; (文字超出部分隐藏)text-overflow:ellipsis; (文字超出部分显示省略号)

CSS实现文本超过指定长度显示省略号

1 <style type="text/css"> 2 li { 3 width:200px;/*宽度,超过即会溢出*/ 4 line-height:25px;/*设置行间距*/ 5 text-overflow:ellipsis;/*当文本溢出时显示…此时还必须定义: 6 强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏 (overflow:hidden)*/ 7 white-space:nowrap;/*表示文本不会换行*/ 8 overflo

css3 设置多行文本显示省略号

display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 .-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 .text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 .overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-

css样式(单行文本超出部分以...显示)

效果图: 标题 { height: 30px; line-height: 25px; margin-left: 6px; margin-right: 8px; font-size: 16px; color: #3E3F40; white-space: nowrap;/*规定段落中的文本不进行换行*/ text-overflow: ellipsis;/*text-overflow 属性规定当文本溢出包含元素时发生的事情.ellipsis 显示省略符号来代表被修剪的文本.*/ overflow: h

多行文本显示省略号

overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

css实现单行、多行文本超出显示省略号

前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line { border: 1px solid #f70505; padding: 8px; width: 400px; overflow: hidden; text-overflow: ellipsis; //文本溢出显示省略号 white-space: nowrap; //文本不会换行 } 语法:text-overflo

页面多行文本最后显示省略号

单行文本超出显示省略号比较简单,多行文本显示省略号可能一些同学不是很清楚,贴代码: -webkit-line-clamp:n;一般是你需要几行文本的行数,而-webkit-box-orient是文本方向.