精华内容
下载资源
问答
  • 基础属性:(只能做到超出一行部分省略显示) width: 200px; //宽度 overflow: hidden; //超出文本隐藏 ...CSS3属性:(可做到超出 N 行部分省略显示,行数可自定义) width: 200px; /...

    基础属性:(只能做到超出一行部分省略号显示)

    width: 200px;  //宽度
    
    overflow: hidden;  //超出文本隐藏
    
    white-space: nowrap;  //不换行,只显示一行
    
    text-overflow: ellipsis;  //超出部分省略号显示

    CSS3属性:(可做到超出 N 行部分省略号显示,行数可自定义)

    width: 200px;  //宽度
    
    overflow:hidden;  //超出文本隐藏
    
    text-overflow:ellipsis;  ///超出部分省略号显示
    
    display:-webkit-box;  //弹性盒模型
    
    -webkit-box-orient:vertical;  //上下垂直
    
    -webkit-line-clamp:4;  //自定义行数

     

    展开全文
  • CSS文本超过两行用省略代替(兼容所有浏览器)

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

    方法一:常规写法(只兼容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)

    展开全文
  • css 超过两行之后显示省略

    万次阅读 2018-07-10 15:50:53
    overflow:hidden; text-overflow:ellipsis;...-webkit-line-clamp:2; display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的...

    overflow:hidden; 

    text-overflow:ellipsis;

    display:-webkit-box; 

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2; 


    display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

    -webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)

    -webkit-line-clamp:2; //这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。


    展开全文
  • 一直在维护以前的代码 几乎不写css了 今天连超过两行的显示省略都不会了 记下来吧 是时候写两个企业站练练手了 大家都是程序员 怎么就我越来越笨呢 .content{ word-break: break-all; overflow: hidden; text-...

    一直在维护以前的代码 几乎不写css了 今天连超过两行的显示省略号都不会了

    记下来吧 是时候写两个企业站练练手了

    大家都是程序员 怎么就我越来越笨呢

     .content{
           word-break: break-all;
           overflow: hidden;
           text-overflow: ellipsis;
           display: -webkit-box;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
       }
    
    展开全文
  • } else if ((0x0080 ) && (charCode )) { totalLength += 2; } else if ((0x0800 ) && (charCode )) { totalLength += 3; } else { totalLength += 4; } } var totalLengthMax=Number(totalLength); return ...
  • CSS】文字超过三行显示省略...

    万次阅读 2019-05-16 10:11:30
    文字超过两行或三行就显示省略 <style type="text/css"> .p1{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: ...
  • table{  table-layout: fixed;...本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式: 1. table-layout: fixed 由于table-layout的默认值是auto,即table的宽高将取决于...
  • 在项目中我们经常需要在文本过长时显示,将文本超出的部分内容用省略代替,基于css代码是怎么实现的呢?下面脚本之家小编通过分析本文给大家详解,感兴趣的朋友一起学习吧
  • 1. 强制不换行,并且多行文字溢出显示省略 .ellips{/*超出省略*/ white-space:nowrap;....ellips_line2,.ellips_line3{/*chrome下的私有属性*/ display:-webkit-box; -webkit-box-orie...
  • charset=utf-8" /> 【CSScss文字超出显示省略/文字超过三行显示省略.. "p1">据环球网援引美国有线电视新闻网(CNN)周一下午收到局长艾米莉 墨菲(emilymurphy)的一封信称,美国总务管理局当地时间23日晚已...
  • -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 看的积分换会计师对福建省的粉红色的尽快发货肯定就是发货速度快解放后速度快解放后速度快解放后谁看得见发货速度快解放后思考积分兑换按时客户经理...
  • Css文本超出3行自动隐藏显示省略

    千次阅读 2020-08-14 16:10:26
    Css文本超出3行自动隐藏显示省略核心样式less 样式引用方式 核心样式 display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; less 样式 生成show-row-1 ,show-row-2,show-...
  • 比如不超过两行就全部显示,超过两行就把多余的字隐藏并显示省略。利用-webkit-line-clamp属性可以很简单的实现这个需求。 关于-webkit-line-clamp属性 限制在一个块元素显示的文本的行数。-webkit-line-clamp 是...
  • 1、单行文本 使用text-overflow:ellipsis属性 text-overflow: clip | ellipsis | string; clip:修剪文本。 ellipsis:显示省略符号来代表被修剪的文本。.../* 超出部分显示省略 */ white-space: nowra
  • css超出两行显示省略

    万次阅读 2019-03-21 16:38:05
    display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical;
  • css实现第二行超出显示省略 需求: 实现单行文本超出省略: width: 295px;//设置宽度 white-space: nowrap;//不要换行 overflow: hidden; text-overflow: ellipsis;//文本超出省略 实现多行文本超出省略...
  • 简单的很,兄弟 font-size: 16px; overflow: hidden; text-overflow: ellipsis;... -webkit-line-clamp: 2; -webkit-box-orient: vertical; align-content: center; height: 44px; width: 420r
  • 文本超出显示省略: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略 white-space:nowrap; 强制文本不换行 折行 word-break:break-all; 英文单词会分开折行 word-wrap:...
  • css 文本超出2行就隐藏并且显示省略

    万次阅读 多人点赞 2016-05-26 18:12:26
    今天做东西,遇到了这个问题,百度后总结得到了这... //溢出用省略显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性,需要记得。 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢?
  • CSS超过一行自动显示省略

    万次阅读 2017-08-07 17:48:36
    我希望的是当标题的长度超过标签的宽度的时候自动显示省略!这是CSS已经支持了的,而且以前也写过!可是现在重新写这个功能的时候不记得怎么写了!在经过一段时间的百度以后知道了怎么写!现在记录一下 代码: ...
  • word-break: break-all; /* autoprefixer: ignore next */ display: -webkit-box; ... -webkit-line-clamp: 2; //超出几行 /* autoprefixer: ignore next */ -webkit-box-orient: vertical;...
  • 设置文字超过某个行数用省略表示 利用弹性伸缩盒子模型 /* 将对象设置为弹性伸缩盒子模型 */ display: -webkit-box; /* 设置对象的子元素的排列方式:从上到下垂直排列子元素 */ -webkit-box-orient: vertical...
  • //溢出用省略显示 white-space:nowrap; //溢出不换行  以上只试用于单行文本,要解决多行如下:   css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -...
  • 一、超出文本只显示省略 HTML代码: <div id="text">这里就是一个标签,里面的内容全是乱写的,也不知道怎么写</div> CSS代码: #text{ width: 150px; /* 容器宽度 */ white-space: no...
  • css文字超出一行就显示省略

    千次阅读 2020-12-08 10:35:47
    1,css超出一行用点表示 white-space:nowrap;...2css超出二行用点表示 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  • style type="text/css"> .text_slice { width: 100px; height:100px; background-color:transparent;//按钮透明 border:none;//边框透明 overflow: hidden; text-overflow: ellipsis;...
  • 一、div内显示一行,超出部分用省略显示  white-space: nowrap;...2 3 二、div内显示两行或三行,超出部分用省略显示  overflow: hidden;  text-overflow: ellipsis;  display: -webk...
  • css超出两行省略,超出一行省略

    千次阅读 2017-06-06 16:33:45
    超出一行省略:p{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /这里的ellipsis的英文名字就是省略...}超出2行省略p { overflow : hidden; text-overflow: ellipsis; display: -webkit-
  • 使用说明超出一行出现向下的 iconfont ,超出的文字用省略代替, 点击iconfont 后,箭头向上,使用说明全部展示不出现省略。效果如下 <div class="tips item_b"> <span class="text" :class="{ ...
  • 1.固定的宽度,强制不换行,超出隐藏,显示省略 .ellipse1{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .ellipse2{overflow:hidden; text-overflow:ellipsis;display:-webkit-box;-...

空空如也

空空如也

1 2 3 4
收藏数 66
精华内容 26
关键字:

css超过2行省略号