首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

翻译:如何使用CSS实现多行文本省略号显示

本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添加译者的一些感想,请各位读者谅解。...合理的截断多行文本是件不容易的事情,我们通常采用几种方法解决: overflow: hidden直接隐藏多余的文本 text-overflow: ellipsis只适用于单行文本的处理 各种比较脆弱的javascript...利用该属性实现多行文本省略号显示需要配合其他三个属性:display: -webkit-box、-webkit-box-orient、text-overflow: ellipsis;。...: ellipsis;则表示超出盒子的部分使用省略号表示。...CSS实现多行文本溢出的省略号显示 我们把实现的细节划分为7个步骤,在这个实现过程中最简单的就是截断文本,而最难的部分则是让一个元素处在其父包含块溢出时的右下方,并且当父元素未溢出时该元素消失不可见。

2.8K60
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【云端架构】前端CSS实现单行、多行文本溢出显示省略号

    如何实现单行文本的溢出显示省略号,同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。...实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图: 但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢...接下来重点说一说多行文本溢出显示省略号,如下。...webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 效果如图: 适用范围: 因使用了WebKit的CSS...扩展属性,该方法适用于WebKit浏览器及移动端; 注: -webkit-line-clamp用来限制在一个块元素显示的文本的行数。

    1.5K50

    【前端芝士树】纯CSS实现多行文本溢出显示省略号

    【前端芝士树】纯CSS实现多行文本溢出显示省略号 使用-webkit-line-clamp来控制行数 由于-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性...(unsupported WebKit property),它没有出现在 CSS 规范草案中,为了实现该效果,它需要组合其他外来的 WebKit 属性。...overflow: hidden; text-overflow: ellipsis; //文本溢出时,用省略号“…”隐藏超出范围的文本。...但是,使用旧的过时的 flexbox 语法是 line-clamp 在任何-webkit-浏览器中处理多行溢出的唯一纯 CSS 方法。...text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; 参考文献 《多行文本溢出显示省略号

    1.2K20

    CSS多行文本溢出样式

    单行文本溢出省略 核心 CSS 语句 overflow: hidden; 文字长度超出限定宽度,则截断超出的内容 white-space: nowrap; 规定段落中的文本不进行换行 text-overflow...: ellipsis; 文本溢出时,用省略号来代替 Demo div { width: 150px; height: 50px; border: 1px solid red;... 效果图 多行文本溢出省略 核心语句 -webkit-line-clamp: 2; 限制在一个块元素显示的文本的行数,2 表示最多显示两行,为了实现该效果,需要组合其他的... 效果图 这样就很容易的实现了多行文本溢出显示省略号的效果,不过这个方案有个不好的点就是兼容性不好 -webkit-line-clamp 属性只有 webkit 内核的浏览器才支持...,多适用于移动端页面,移动端的浏览器更多是基于 WebKit 内核的 今天,你学废了吗~ 首发自:CSS 单/多行文本溢出样式 - 小鑫の随笔

    1.8K30

    jQuery.dotdotdot多行文本省略号插件的使用方法

    最近在做一个自适应的网站,经常遇到需要文本的溢出地方,我写了一个CSS简单设置文本溢出的方法:用css实现文本溢出div显示省略号 但是IE只能设置单行溢出隐藏,Webkit内核浏览器才支持多行溢出,于是找到了这款插件...什么是dotdotdot Dotdotdot是一款截断网页多行内容的jQuery插件,当前文本超出范围自动显示省略号。 该插件可以在省略号之后,内容的结尾处添加“More/更多”锚点。...             在这个函数里,“this”是指该元素 */             ellipsis: "\u2026 ",             /* 添加的文本省略号 */             ...height: null,             /* 元素的(最大)高度:              null: 判断CSS (max-)的高度;              number: 设置一个固定的高度...;              "watch": 重新判断“watch”中的CSS (max-)的高度;  */             keep: null,             /* jQuery

    2.4K01

    css实现文本溢出 超出部分隐藏显示省略号

    可以用JQuery插件更好的实现文本溢出隐藏效果,可以访问:jQuery.dotdotdot多行文本省略号插件的使用方法 在CSS3中可以使用 text-overflow 对文本溢出进行处理: clip...:(默认值),文本溢出部分裁切。...text-overflow: ellipsis;         white-space:nowrap; } WebKit内核的浏览器可以设置 -webkit-line-clamp: number; 实现在第几行末尾显示省略号...webkit-box-orient: vertical;         /*内容之间的排列顺序,vertical垂直方向排列*/         -webkit-line-clamp: 3;         /*在第几行末尾显示省略号...        word-break: break-all; } -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS

    3.2K00
    领券