精华内容
下载资源
问答
  • 用 css 或 js 实现多行文本溢出省略效果CSS版:如何用 css 或 js 实现多行文本溢出省略效果,考虑兼容性.test{width: 100px;height: 46px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-...

    用 css 或 js 实现多行文本溢出省略效果

    CSS版:

    如何用 css 或 js 实现多行文本溢出省略效果,考虑兼容性

    .test{

    width: 100px;

    height: 46px;

    overflow: hidden;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp:2

    }

    js版:

    如何用 css 或 js 实现多行文本溢出省略效果,考虑兼容性

    .test{

    width: 100px;

    overflow: hidden;

    position: relative;

    line-height: 20px;

    max-height: 40px;

    }

    const p = document.querySelector('#test')

    let words = p.innerHTML.split(/(?<=[\u4e00-\u9fa5])|(?<=\w*?\b)/g)

    while (p.scrollHeight > p.clientHeight) {

    words.pop()

    p.innerHTML = words.join('') + '...'

    }

    展开全文
  • 多行文本溢出

    2018-07-31 19:46:07
    大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加...但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。 Web...

    大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

    CSS代码:
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。

    WebKit浏览器或移动端的页面

    在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

    -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
    常见结合属性:

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

    css 代码:

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

    这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。

    具体例子可以查看http://www.css88.com/webkit/-webkit-line-clamp/

    跨浏览器兼容的方案

    比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现;

    例如:

    css 代码:

    p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
    }
    p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;
    }

     

    展开全文
  • 多行文本溢出显示省略号 webkit浏览器或移动端的页面 在webkit浏览器或移动端(绝大部分是webkit内核的浏览器)可以直接使用webkit的css扩展属性(webkit是私有属性)-webkit-line-clam.

    实际应用项目:http://github.crmeb.net/u/long

    • 单行文本溢出显示省略号

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    (需要对容器设置单行高度)
    • 多行文本溢出显示省略号

      webkit浏览器或移动端的页面

         在webkit浏览器或移动端(绝大部分是webkit内核的浏览器)可以直接使用webkit的css扩展属性(webkit是私有属性)-webkit-line-clamp;
         注意:这是一个不规范的属性,它没有在CSS的规范草案中
         -webkit-line-clamp用来限制在一个块元素显示的文本行数,为了实现效果,他要与一下webkit属性结合使用:
             display:-webkit-box;(必须结合的属性,将对象作为弹性伸缩盒子模型展示)
             -webkit-box-orient(必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式)

      完整版写法如下:

    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2; (两行文字)
    -webkit-box-orient:vertical;
    **跨浏览器兼容的方案**
    比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(...)的元素模拟实现
    p{
    position:relative;
    line-height:1.4em;
    /*设置容器高度为3倍行高就是显示3行*/
    height:4.2em;
    overflow:hidden;
    }
    p::after{
    content:'...';
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:#fff;
    }

    注意:IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如<span>...</span>去模拟;要支持IE8,需要将::after替换为:after

    JavaScript解决方案

    使用js也可以根据上面的思路去模拟,实现也很简单,推荐两个做类似工作的成熟小工具:
    1、clamp.js
    2、jQuery插件  jquery.dotdotdot
    使用简单,实现方法自行百度
    展开全文
  • 本篇教程介绍了HTML+CSS入门 移动端页面实现多行文本溢出显示省略号,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。<手机浏览器种类:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全...

    本篇教程介绍了HTML+CSS入门 移动端页面实现多行文本溢出显示省略号,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

    <

    手机浏览器种类:

    UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,其他杂牌浏览器

    国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自助研发的内核,就像国内的手机操作系统都是基于Android修改的

    由于移动端(绝大多数都是基于WebKit内核的浏览器),所以可以直接使用WebKit的CSS扩展属性 -webkit-line-clamp (是WebKit私有属性);注意:(这个属性没有出现在css规范草案中,不过在WebKit内核中可以正常使用)。

    CSS代码如下:

    1 overflow : hidden;

    2 text-overflow: ellipsis;

    3 display: -webkit-box;

    4 -webkit-line-clamp: 2;

    5 -webkit-box-orient: vertical;

    1.  overflow:hidden;  设置了这个属性,text-overflow属性才会生效。

    2.  text-overflow: ellipsis;  用来在多行文本的情况下,用省略号"..."隐藏超出范围的文本内容。

    3.  display: -webkit-box;  必须结合的属性,将对象作为弹性伸缩盒子模型显示。

    4.  -webkit-line-clamp: 2;  用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。

    5.  -webkit-box-orient: vertical;  必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。

    本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!

    展开全文
  • 多行文本溢出后显示...下面只是其中一种纯css的解决办法,有一定的局限性,在于-webkit-line-clamp: 2这句语句,这句语句是webkit基于内核的一句语句,其他内核均无法使用。可是我专门列出来的原因是这个可以用于...
  • 多行文本溢出问题

    2018-02-22 09:50:23
    多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出 &lt;/div&...
  • 单行文本溢出: .box{ width:80%;//宽度必须有 overflow:hidden; white-space:nowrap;...多行文本溢出: .box{ display:-webkit-box; overflow:hidden;  text-overflow:ellipsis;  word-break:break...
  • 思路获取目标文本行高line-height,内容高度offsetHeight假设 2 行文本溢出隐藏内容高度除以行高大于2,则加上溢出隐藏的css类名css代码.text{line-height:14px;overflow:hidden;}.texter{height:28px;}.texter:...
  • 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;...多行文本溢出display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;效果:3.多行文本折行word-break: break-all...
  • 多行文本溢出隐藏省略号一、单行文本溢出二、多行文本溢出 一、单行文本溢出 /* 单行文本溢出 */ .inlines{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 二、多行文本溢出 /* 多行...
  • 当行文本溢出与多行文本溢出 1.单行文本溢出 .inaline{ overflow:hidden; white-space:nowarp;//文本不会换行,文本会在在同一行上继续,直到遇到 标签为止。 text-overflow:ellipsis;//带省略号 } 2.多行文本...
  • 此方案支持IE,firefox,safari,chrome。 效果如下 overview live demo 完整代码 .ellipsis { overflow: hidden; height: 100px;... 这是一个几乎全浏览器兼容的多行文本溢出的css解决方案,希望你能有所收获。
  • <div class="ellipsis">英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?...单行文本溢出隐藏很简单了 ov..
  • 单行文本与多行文本溢出时显示省略号的CSS设置
  • 主要介绍了vue实现移动端项目多行文本溢出省略功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • body,html{padding:0;margin:0;}*{padding:0;margin:0;}.ellipsis{overflow:hidden;max-height:50px;line-height:25px;margin:10px;}.ellipsis:before{content:"";float:left;width:5px;...}.ellipsis > *:...
  • 单行文本溢出省略号一般我们都知道实现方法。.xxx {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}那么如果多行文本应该怎么做呢,伟大的chrome 又走在了时代前沿,可以使用-webkit-line-clamp这...
  • 单、多行文本溢出

    2017-09-01 10:28:48
    多行文本溢出
  • 只需给最外层容器设置宽高即可实现多行文本溢出显示...
  • 1单行文本溢出 .txt{  overflow:hidden;  white-space:nowrap;  text-overflow:...2多行文本溢出 .txt{  display: -webkit-box !important;  overflow:hidden;  text-overflow:ellipsis;  wo...
  • CSS设置多行文本溢出隐藏效果
  • 单行/多行文本溢出隐藏 单行文本溢出隐藏 width:300px; overflow: hidden; text-overflow:ellipsis; whitewhite-space: nowrap; 多行文本溢出隐藏 display: -webkit-box; -webkit-box-orient: vertical; -...
  • 主要介绍了css多行文本溢出时出现省略号的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 2.实现多行文本溢出省略号 3.多行文本遇到数字和英文提前省略的解决方法 实现最简单的单行文本溢出省略号 .text{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 这是较为基础的写法 ...
  • CSS处理多行文本溢出

    2020-05-25 11:08:16
    如果实现单行文本的溢出显示...但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号,如下。 实现方法: display:-webkit-box; -we...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,387
精华内容 4,954
关键字:

多行文本溢出