精华内容
下载资源
问答
  • CSS控制文字,超出部分显示省略

    万次阅读 多人点赞 2018-06-25 14:34:04
    CSS控制文字,超出部分显示省略号http://www.daqianduan.com/6179.html <p style="... 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然...

    CSS控制文字,超出部分显示省略号

    http://www.daqianduan.com/6179.html

     

    <p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">

     

     

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

    实现方法:

    overflow: hidden;
    text-overflow:ellipsis; white-space: nowrap;

    效果如图:
    dome1

    但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

    接下来重点说一说多行文本溢出显示省略号,如下。

    实现方法:

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

    效果如图:
    dome2

    适用范围:
    因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

    注:

    1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
    2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
    3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

    实现方法:

    p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;} p::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%); }

    效果如图:
    dome3
    适用范围:
    该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

    注:

    1. 将height设置为line-height的整数倍,防止超出的文字露出。
    2. 给p::after添加渐变背景可避免文字只显示一半。
    3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。
    分类:  css
    展开全文
  • 主要介绍了css样式怎么显示省略号,即当超过自定义宽度时隐藏显示省略标记,比较实用,需要的朋友可以参考下
  • DIV CSS text-overflow文本有溢出时显示css省略号clip ellipsis样式基础知识与用法实例经验教程
  • 文字省略效果

    2021-06-01 20:07:43
    文字超长可自定义限定字数,显示省略号 展开 收起
  • 多行省略

    2017-11-10 11:06:19
    目前CSS只能控制单行省略,而多行省略CSS3目前还没做得足够兼容!特此奉上这个插件方便各位学习
  • 文本省略组件 Ellipsis

    2021-03-24 14:10:11
    Vue文本省略组件
  • 列表由于标题过长而影响美观度,所以想让标题溢出的文字以省略号方式表现.此类文章网上会有很多,本文整理了一些经验技巧与大家共同分享,感兴趣的你可不要错过了哈,希望可以帮助到你
  • 初中语文文摘文苑省略
  • 原因:客户需求,想要文字两端对齐,多行省略。如图: 一,vue之中多行省略失效问题: **先说一下多行省略和文字居中的基本代码**: .aboutUs-text >>> .p{ overflow: hidden; //超出隐藏 text-...

    最近敲代码的时候,遇到一个很奇葩的问题,
    原因:客户需求,想要文字两端对齐,多行省略。如图:如图所示
    一,vue之中多行省略失效问题:

    **先说一下多行省略和文字居中的基本代码**:
    
    .aboutUs-text  >>> .p{ 
      overflow: hidden;  //超出隐藏
      text-overflow: ellipsis; //文字超出部分省略号代替
      display: -webkit-box; //必须要的diaplay盒子模型
      -webkit-line-clamp: 7; //行数省略,7为出现7行,之后省略
      -webkit-box-orient: vertical; //规定排列方式为竖直
      text-align: justify;//文字两端对齐
    }
    
    以上是基本代码,正常情况下,直接复制粘贴以上css样式就可以实现需求。
    ps:>>>是vue里面的强制修改样式,因为内容是v-html的方法,所以要用到,正常情况下不需要加。
    

    但是,当我在vue之中使用的时候,问题出现了:虽然是同样的代码,在本地跑也没有问题,但是vue打包上传之后多行省略会失效!!!

    经过长达两个小时的查探,发现问题所在:

    **产生原因:** 这是webpack的锅,他会进行一个操作,从而使得  `display: -webkit-box`失效。
    **解决方法:** 在`display: -webkit-box`进行的时候关掉那个操作就好了。
    

    这是修改之后的代码:

    .aboutUs-text >>> p{
      overflow: hidden; 
      text-overflow: ellipsis; 
      display: -webkit-box; 
      -webkit-line-clamp: 7; 
       /*! autoprefixer: off */ 关闭操作
      -webkit-box-orient: vertical; 
      /* autoprefixer: on */ 打开操作
      text-align: justify;
    }
    

    可以看到,这样的话,就不会再出现vue打包之后多行省略失效的问题了。

    二,省略号和文字重叠问题

    当解决了上一个问题之后,又出现了一个新的问题,那就是省略号和文字重叠。如图:
    

    如图,出现了问题,文字和省略号重叠了

    如上图所示,重叠了!!!而且这个文字只在手机端会显示,也就是说,在pc端用浏览器测试的时候是不会出现问题的。

    经过更长时间的查探,发现(猜测)问题所在:

    **产生原因:** 当两端对齐和省略号一起使用时,省略号的地方足够再加上一个(半个)字,所以默认对齐。
    **解决方法:** 将宽度设置为em,目前没有发现再次出现问题,需要更多的真机测试来验证可行性。
    

    代码:

    .aboutUs-text {
      width: 18em;
      font-size: 13px;
    }
    
    展开全文
  • CSS实现多行文字显示省略号效果.zip
  • 省略文字JS版

    2013-12-06 15:33:45
    省略文字
  • css3中如何让多余的字符串消失并附加省略号的方法 可以使用 复制代码代码如下: white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-text-overflow:ellipsis;height:50px 让多余的内容隐藏并附加...
  • 可以兼容火狐的溢出变省略号可以兼容火狐的溢出变省略号可以兼容火狐的溢出变省略号可以兼容火狐的溢出变省略
  • 超出一行省略: p{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } 超出2行省略: p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -...

    超出一行省略:

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

    超出2行省略:

    p { 
    overflow : hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    }
    
    展开全文
  • CSS文本超过两行用省略号代替(兼容所有浏览器)

    万次阅读 多人点赞 2018-09-18 14:44:55
    CSS文本超过两行用省略号代替1、常规写法(只兼容Chrome内核浏览器)2、可以兼容所有浏览器的方式 1、常规写法(只兼容Chrome内核浏览器) 完整代码供参考: &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;...

    方法一:常规写法(只兼容Chrome内核浏览器)

    完整代码供参考:

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>Titile</title>
        <style type="text/css">
          .test1{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient: vertical;
          }
        </style>
      </head>
      <body>
        <div class="test1">
          测试文字1234567890测试文字1234567890测试文字1234567890测试文字1234567890
        </div>
      </body>
    </html>
    

    (1)只显示一行,超出部分用省略号

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    

    (2)只显示两行(或多行),超出部分用省略号

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;  // 控制多行的行数
        -webkit-box-orient: vertical;
    

    这个处理方式的目前只兼容webkit内核的浏览器:
    在这里插入图片描述


    方法二:可以兼容所有浏览器的方式( js + CSS实现 )

    思想:首先新建一个隐藏的DOM节点,把要显示的内容插入到该DOM节点中,然后计算该DOM的宽度,如果超过了原来文本宽度的两倍,则显示省略号。
    以下为Vue.js的实现代码(仅供参考):

    <template>
      <div :class="{content: true, ellipsis: ellipsis}">
        {{content}}
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          content: '这里是测试的文字,abc,123,这里是测试的文字,abc,123,这里是测试的文字,abc,123',
          ellipsis: false // 判断是否要加上...的样式
        }
      },
      create () {
        if (this.content && this.content.trim()) {
          const contentWidth = 800 // 假设原来文本的宽度的800,这里根据具体的情况而定
          this.ellipsis = this.isEllipsis(this.content.trim(), contentWidth)
        }
      },
      method: {
        isEllipsis (content, contentWidth) {
          let el = document.createElement('div')  // 创建一个临时div
          el.innerHTML = content
          el.style.whiteSpace = 'nowrap' // 不换行
          el.style.position = 'absolute'
          el.style.opacity = 0 // 完全透明
          document.body.appendChild(el)
          const elWidth = el.clientWidth  // 获取这个含有content内容的临时div的宽度
          document.body.removeChild(el)
          return elWidth >= contentWidth * 2   // 判断这个临时div的宽度是否大于原节点宽度的两倍
        }
      }
    }
    </script>
    
    <style lang="scss">
      .content {
        max-height: 45px;  // 两行文字的最大高度
        line-height: 22px;
        overflow: hidden;
        position: relative;
        &.ellipsis {
          &:after {       // 如果超过2行的宽度,则用...放在第二行的结尾
            content: '...';
            font-weight: bold;
            position: absolute; // 调整...的位置
            top: 22px;
            right: 0;
            padding: 0 20px 1px 45px;
            background: url('../images/ellipsis_bg.png') repeat-y;   // 预先准备好的覆盖的尾部图片
          }
        }
      }
    </style>
    
    

    方法三:可以兼容所有浏览器的方式( 纯CSS实现 )

    通过float特性实现多行文字截断效果,基本原理:
    在这里插入图片描述

    有个三个盒子 div,粉色盒子左浮动,浅蓝色盒子和黄色盒子右浮动:
    1、当浅蓝色盒子的高度低于粉色盒子,黄色盒子仍会处于浅蓝色盒子右下方。
    2、如果浅蓝色盒子文本过多,高度超过了粉色盒子,则黄色盒子不会停留在右下方,而是掉到了粉色盒子下。

    好了,这样两种状态的两种展示形式已经区分开了,那么我们可以将黄色盒子进行相对定位,将内容溢出的黄色盒子移动到文本内容右下角,而未溢出的则会被移到外太空去了,只要我们使用 overflow:hidden就可以隐藏掉。
    在这里插入图片描述

    基本原理就是这样,我们可以将浅蓝色区域想象成标题,黄色区域想象为省略号效果。那么你可能会觉得粉色盒子占了空间,那岂不是标题会整体延后了吗,这里可以通过 margin 的负值来出来,设置浅蓝色盒子的 margin-left 的负值与粉色盒子的宽度相同,标题也能正常显示。

    具体代码如下:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .wrap {
                height: 40px;
                line-height: 20px;
                overflow: hidden;
            }
            
            .wrap .text {
                float: left;
                margin-left: -5px;
                width: 100%;
                word-break: break-all;
            }
            
            .wrap::before {
                float: left;
                width: 5px;
                content: '';
                height: 40px;
            }
            
            .wrap::after {
                float: right;
                content: "...";
                height: 20px;
                line-height: 20px;
                /* 为三个省略号的宽度 */
                width: 3em;
                /* 使盒子不占位置 */
                margin-left: -3em;
                /* 移动省略号位置 */
                position: relative;
                left: 100%;
                top: -20px;
                padding-right: 5px;
                background-color: #FFF;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="text">
                That's the basic idea. You can imagine the light blue region as the title, and the yellow region as the ellipsis. Then you may think that the pink box takes up space, but will the title be delayed as a whole? Here you can come out by the negative value of margin. Set the negative value of the pale blue box to be the same width as the pink box, and the title can also be displayed normally.
            </div>
        </div>
    </body>
    </html>
    

    这里我目前看到最巧妙的方式了。只需要支持 CSS 2.1 的特性就可以了,它的优点有:

    兼容性好,对各大主流浏览器有好的支持。

    响应式截断,根据不同宽度做出调整。

    文本超出范围才显示省略号,否则不显示省略号。

    至于缺点,因为我们是模拟省略号,所以显示位置有时候没办法刚刚好,所以可以考虑:

    加一个渐变效果,贴合文字,就像上述 demo 效果一样。

    添加 word-break:break-all; 使一个单词能够在换行时进行拆分,这样文字和省略号贴合效果更佳。

    这个方法应该是我看到最好的用纯 CSS 处理的方式了,如果你有更好的方法,欢迎留言交流!

    (https://segmentfault.com/a/1190000016879657)

    展开全文
  • select超出一定长度则变成省略
  • 在英汉两种语言中,省略大体上可以分为名词性省略、动词性省略和小句性省略。英汉两种语言的语篇省略形式具有一定的相似性。但是,由于汉语是以意合为主的语言,而英语则是形合为主的语言,所以英汉语言的省略现象依然...
  • js分页带省略

    2017-08-18 10:23:32
    js分页插件 中间多着省略
  • css实现文本单行省略和多行省略

    千次阅读 2018-11-26 20:31:40
    单行省略: white-space:nowrap; overflow:hiddlen; text-overflow:ellipsis; 多行省略: display:-webkit-box; -webkit-box-orient:vertical;//表示盒子对象的子元素的排列方式 -webkit-line-clamp:3;//限制文本...
  • 字符串 省略号 适配

    2016-07-25 09:29:25
    字符串 省略号 适配
  • CyclingstabilityofLa__省略_ydrideelectrode
  • 主要介绍了Python如何省略括号方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • jquery省略号插件

    2017-02-04 23:29:51
    jquery实现超出部分省略号显示
  • 动态省略号.html

    2020-09-27 15:26:22
    纯css实现,亲测html5、vue、jsp适用,状态后面省略号动态展示,速度可调
  • 为了研究中文情感文本中评价对象省略现象的识别方法,将评价对象省略识别建模为一个二元分类问题,利用机器学习算法进行自动学习。探讨当前句位置无关特征、当前句位置相关特征和上下文相关特征对评价对象省略识别的...
  • 主要介绍了css实现文本溢出显示省略号的方法和示例分享,推荐给大家。
  • 高中语法省略插入语.pdf

空空如也

空空如也

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

省略