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

    万次阅读 多人点赞 2018-06-25 14:34:04
    CSS控制文字,超出部分显示省略号http://www.daqianduan.com/6179.html <p style="width: 300px;overflow: hidden;white-space: nowrap;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
    展开全文
  • 超出饼图的教程1.xlsx

    2021-08-12 10:56:56
    超出饼图的教程1
  • CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号
  • 移动端内容超出

    2017-10-26 16:11:10
    移动端内容超出,应该怎么解决,已经采用了 rem.........................................................
  • highcharts饼图字段过长超出解决,代码明了,操作简单
  • 关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
  • 主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下
  • div overflow 超出隐藏属性使用说明,不知道overflow怎么用的朋友可以参考下。
  • 文本超出隐藏

    千次阅读 2019-10-26 13:37:54
    单行文本超出隐藏 html代码: <div class="single-over" style="width:100px; border:1px solid red;"> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本...

    单行文本超出隐藏

    html代码:

      <div class="single-over" style="width:100px; border:1px solid red;">
       文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    </div> 
    

    CSS代码:

     .single-over{
          overflow: hidden; //超出的文本隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          white-space: nowrap; //溢出不换行
        }
    

    多行文本超出隐藏

    html代码:

          <div class="multi-over" style="width:100px; border:1px solid red;">多行文本超出影藏多行文本超出影藏多行文本超出影藏多行文本超出影藏多行文本超出影藏多行文本超出影藏多行文本超出影藏多行文本超出影藏多行文本超出影藏多行文本超出影藏</div>
    

    CSS代码:

       .multi-over{
                overflow: hidden;
                text-overflow: ellipsis;
                display:-webkit-box; //作为弹性伸缩盒子模型显示。
                -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
                -webkit-line-clamp:2; //显示的行,文本超出 显示几行
            }
    

    应用 calc() 设置最小高度

      .set_height{
            min-height: calc(100vh - 178px);//注意减号中间要有空格
            //100vh代表当前高度,减去:如头导航占的高度,即当前盒子的高会占满除去头导航外的高度
        }
    
    展开全文
  • //单行超出隐藏 overflow:hidden; //超出一行文字自动隐藏 text-overflow:ellipsis;//文字隐藏后添加省略号 white-space:nowrap; //强制不换行 //多行超出隐藏 display: -webkit-box; word-break: break-all...
    //单行超出隐藏
    overflow:hidden; //超出一行文字自动隐藏
     
    text-overflow:ellipsis;//文字隐藏后添加省略号
     
    white-space:nowrap; //强制不换行
    //多行超出隐藏
     display: -webkit-box;
     word-break: break-all;
     text-overflow: ellipsis;
     font-size: 28rpx;//自适应字体
     overflow: hidden;
     -webkit-box-orient: vertical;
     -webkit-line-clamp:2;//设置 需要显示的行数

    了解更多,请加QQ群讨论:292539913

    展开全文
  • 内容超出隐藏

    2019-08-02 09:56:00
    /*超出宽度部分的隐藏*/ white-space:nowrap; /*文字不换行*/ text-overflow:ellipsis; /*超出则...代替*/ // 多行 text-overflow: -o-ellipsis-lastline; /*两行后超出省略*/ overflow: hidden; text-o...
    // 单行
    overflow:hidden; /*超出宽度部分的隐藏*/
    white-space:nowrap; /*文字不换行*/
    text-overflow:ellipsis; /*超出则...代替*/
    
    // 多行
    text-overflow: -o-ellipsis-lastline; /*两行后超出省略*/
    overflow: hidden;
    text-overflow: ellipsis; /*超出则...代替*/
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 行数*/
    line-clamp: 2; /*行数*/
    -webkit-box-orient: vertical;
    

      

    转载于:https://www.cnblogs.com/lymconch/p/11286848.html

    展开全文
  • css文字超出点点点

    千次阅读 2018-10-25 16:47:40
    css操作文字超出点点点 一行内超出点点点 overflow:hidden; /*超出的部分隐藏起来。*/ white-space:nowrap;/*不显示的地方用省略号...代替*/ text-overflow:ellipsis;/* 支持 IE */ 超出两行显示点点点 overflow...
  • 当内容超出div时,自动出现滚动条的条件 内容必须在div中 div要设置宽高 overflow设置为auto 备注 overflow:auto;当内容宽度超出div宽度,或者内容高度超出div宽度,或者同时超出,会自动出现水平、或者垂直...
  • Linux的市场空间超出预期.pdf
  • 本文主要介绍了文本超出部分隐藏的两种方法:单行隐藏和多行隐藏。具有一定的参考价值,下面跟着小编一起来看下吧
  • 解决方法:使用窗口移动精灵或AltDrag这两款窗口移动工具,摆脱只能拖动标题栏移动窗口的限制,任意移动超出屏幕的窗口,将窗口或对话框移动到顶部后,仍可继续向上拖动,使窗口顶部移动到屏幕之外,底部就会显示...
  • jQuery超出屏幕高度显示返回顶部是一款带有返回顶部按钮,支持设置QQ,电话号码的jQuery在线客服代码。
  • 解决“文件大小超出程序区范围 超出部分自动移入EEPROM”问题
  • 设置一行文字超出省略:width:100px;/*这个根据实际需要设置大小*/white-space:nowrap;overflow:hidden;text-overflow:ellipsis; 设置多行省略: overflow: hidden; text-overflow: ellipsis;display: -webkit-...
  • jQuery超出屏幕高度显示返回顶部简介: jQuery超出屏幕高度显示返回顶部是一款带有返回顶部按钮,支持设置QQ,电话号码的jQuery在线客服代码
  • 单行文字超出后隐藏 首先容器需要有固定的宽高,其次加入以下代码即可。 多行文字超出后隐藏 容器不需要有固定的宽高,只需加入以下代码即可。 无需指定高度,只需指定最多显示几行,属性 -webkit-line-clamp。 本...
  • 我是一段文字,超出固定个数显示省略号 </div> .text { /* 超出10个字隐藏,之所以设置11em是因为省略号占一个位置 */ width: 11em; overflow: hidden; /* 显示省略符号来代表被修剪的文本。 */ ...
  • 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:...
  • 索引超出范围

    千次阅读 2019-07-18 08:42:19
    下标只能是从0到1,通过下标访问List中的值时,List[0],List[1]都不会有错,但从List[2]开始就会报"索引超出范围。必须为非负值并小于集合大小的解决方法"的错误了,因为List对象中只有两个值,而要从中取出第三个...
  • 做涟漪效果的时候我发现了一个问题,在ripple文件里面没有属性是设置涟漪的超出边界效果和不超出边界效果的,网上搜到的都是在外部直接设置?android:attr/selectableItemBackground(不超出边界)和?android:attr/...
  • js文字超出省略号特效
  • 主要为大家详细介绍了vue实现滑动超出指定距离回顶部功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文为大家介绍下HTML超出文本多行如何截取其实原理很简单通过子容器(p)与父容器(div)高度的比较根据正则表达式进行字符截取,直到两者相等为止
  • css超出隐藏

    千次阅读 2019-09-20 10:15:05
    CSS多行文字超出隐藏加省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 限制行数 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box...
  • 主要介绍JQuery如何实现控制内容长度超出规定长度显示省略号,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 679,014
精华内容 271,605
关键字:

超出