精华内容
下载资源
问答
  • 多行文本溢出省略号

    2019-09-29 15:20:11
    display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: normal !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; ...
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    转载于:https://www.cnblogs.com/BlueCc/p/11176201.html

    展开全文
  • 1.单行文本溢出… overflow: hidden;...2.多行文本溢出… overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;// 限制多少行… 3.多行文本折行 overfl...

    1.单行文本溢出…
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;

    2.多行文本溢出…
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;// 限制多少行…

    3.多行文本折行
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-all;

    展开全文
  • <div class="ellipsis">英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?...单行文本溢出隐藏很简单了 ov..
    <div class="ellipsis">英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?
    英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?</div>

     单行文本溢出隐藏很简单了

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

     多行文本溢出隐藏有两种方式

     第一种方式:

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

    第二种方式: 

    这里主要来说一下第二种方式

    实现思路:

    1. 首先给容器设置宽度,纵向溢出隐藏 ( overflow-y : hidden )

    2. 然后容器文本需要一个行高

    3. 容器的高度等于( 显示的行数 * 行高 )

    4. 容器设置相对定位

    5. 使用伪元素添加省略号

    6. 绝对定位,相对于容器,定位在右下角

    7. 伪元素设置 宽度 为 1个字体大小+2px 的间隙(以防旁边文字露出)

    8. 高度为一个字体大小

    9. 设置背景色覆盖住最后一个文字

    10. 当然也可以设置color给省略号设置颜色

    .ellipsis{
        width:300px;
        height:60px;
        border:1px solid #222;
        overflow-y:hidden;
        position:relative;
        line-height:20px;
    }
    .ellipsis::after{
        content:'...';
        position:absolute;
        right:0;
        bottom:0;
        width:calc(1em + 2px);
        height:1em;
        background:#fff;
        line-height:1em;
        color:red;
    }

     

    展开全文
  • 单行文本溢出省略号 width: 100px; text-overflow: ellipsis; overflow: hidden;...多行文本溢出省略号 padding: 10px; line-height: 20px; color: #545454; height: 130px; display: -webkit-box; di
    1. 单行文本溢出省略号

          width: 100px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
    2. 多行文本溢出省略号

      padding: 10px;
      line-height: 20px;
      height: 130px;
      display: -webkit-box;
      display: -moz-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-box-orient: vertical;
      -webkit-line-clamp:6;
    展开全文
  • 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来...但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。 接下...
  • 单行文本溢出省略号一般我们都知道实现方法。.xxx {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}那么如果多行文本应该怎么做呢,伟大的chrome 又走在了时代前沿,可以使用-webkit-line-clamp这...
  • 问题:容器内的内容平均分布后danh单行文本溢出有问题,单行文本或多行文本溢出,用省略号显示,单行文本white-...解决办法:flex布局特性,使用多行文本溢出省略号显示,解决单行文本省略号的问题 css代码: ...
  • 1、单行文本溢出 p { overflow : hidden; text-overflow: ellipsis; white-space:nowrap;...2、多行文本溢出——单纯只用css方法只有用非标准样式且只兼容webkit内核或者opera浏览器 2.1——-w...
  • 单行文本溢出... .text-over{ width:200px; overflow: hidden; text-overflow:ellipsis;//文本溢出显示省略号 white-space:nowrap;...多行文本溢出... .text-over{ overflow : hidden; text-over...
  • 一、通过css来定义行数 ... // 溢出部分显示... // 控制行数 display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; } 二、现在文本框看起来很拥挤,想给加内边距,如果直接
  • width: *; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  • css3 多行文本溢出省略号

    千次阅读 2016-12-20 11:27:27
    看了下,阿里的手机端,借剑了。作个记录p{ display: -webkit-box; -webkit-line-clamp: 2; word-break: break-all; -webkit-box-orient: vertical; }
  • CSS实现: 单行实现: // css部分 overflow:hidden;...值为nowrap:文本不会换行,文本会在同一行上继续,直到遇到<br>标签为止。 效果如下: 多行实现: // css部分 display: -webk...
  • 同样不需要写js,就是省略号比整个段落都长一块儿,看起来是非常的不友好了 p { position:relative; line-height:1.4em; height:4.2em; overflow:hidden; } 7. p::after { content:"..."; font-weight:bold; ...
  • /* mixin for multiline */ @mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white, $zIndex: 100){ overflow: hidden; position: relative; line-height: $lineHeight;...
  • <div id="goodIntroduction"> 在漫无边际的海水上漂流,偶尔抬头能看见熟悉的日月星辰。 因为我不知道下辈子是否还能遇见你,所以我今生才会那么努力把 最好的给你。 陪伴,是最长情的告白;...
  • 1 分别设置两个伪类before和after,before用来显示省略号,after 用来隐藏省略号 2 当内容较少的时候 after会盖住before,不显示省略号 3 当内容较多需要省略号的时候,内容会把after挤出去,这样就能显示出省略号...
  • css文本溢出显示省略号, 单行文 <div class="test"> asadsadsadsasadasdsadadasa</div> <pre name="code" class="html"> ....
  • 前提: 2.x的 cli 创建... 移动端实现多行文本溢出显示省略号,可以使用 下面这个属性: -webkit-line-clamp: 3; 具体怎么使用这里不作说明,但是在vue中,如果你使用了cli工具创建了项目,那么没有 ...
  • 一、引入jq和jquery.dotdotdot.min.js 二、html结构 点击之后 <div class="detail-content"> <p>新房和二手房各有优缺点。主要有一下区别:<...开发商将新房出售给购房者的前...
  • 单行溢出 overflow: hidden; text-overflow:ellipsis; white-space: nowrap;...多行溢出 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  • flex 弹性布局特性详解:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html问题:容器内的内容平均分布后danh...flex布局特性,使用多行文本溢出省略号显示,解决单行文本省略号的问题css代码:#box{widt...
  • 多行文本溢出显示省略号 webkit浏览器或移动端的页面 在webkit浏览器或移动端(绝大部分是webkit内核的浏览器)可以直接使用webkit的css扩展属性(webkit是私有属性)-webkit-line-clam.
  • CSS多行文本溢出省略显示1、单行文本溢出省略显示2、多行文本溢出省略显示2.1 WebKit内核浏览器解决办法2.2 其他浏览器解决方案2.2.1 定位元素实现多行文本截断 1、单行文本溢出省略显示 实现单行缩略(部分浏览器...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,512
精华内容 2,204
关键字:

多行文本溢出省略号