需求经常有需要对文字溢出进行处理,通常是在文字显示部分的末尾添加“...”等。如下:

aaarticlea/png;base64,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" alt="" />

这种处理可以放在服务器当中做,通过截取特定长度文字来达到。

但是效果不好

一是截取的长度不好控制,尤其是中英文混排或者字体非等宽的情况

二是显示逻辑放到服务器做,日后维护很不方便

三是对 SEO 也有影响

好在 css 当中有专门处理这种问题的属性

一:css处理单行

对于单行文本而言,使用 “text-overflow” 。IE6+都支持,真幸福。

但不是什么元素添加上这个都能立刻有效。

它要求元素必须是bfc,也就是有明确的宽度;再有其中的文字不能换行

p {  overflow: hidden;            /* 除了visible以外的值 */
white-space: nowrap; /* 文字不换行 */
text-overflow: ellipsis;
}

组合使用上述属性才能让元素有正确的效果。如下:

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa0AAAAsCAIAAABZr3CpAAAFMUlEQVR4nO2a25msIBCEyZKQDMUETg6GYhhzHrxB32hcdHSo//NhZ9C2aYoS2QkfAADom/DtBAAA4MvABwEAvQMfBAD0DnwQANA78EEAQO/ABwEAvQMfBAD0DnwQANA78EEAQO+YPhgCDhw4cLzpuMQHAQDgLcAHAQC9Ax8EAPQOfBAA0Dtf8cFpCCEM07k7/zjzGEMIa32mIYQ4zt/OCZSYx/i0kbovpV+Yzhf54DQEmTjOLQvXxCge5DakMrdltrvvMUh5Thv5qBlN76BVgf2mc++QwgedXL4elIrUrHBNxvpBz/J5jFlh7pg0iwVmd5mGLQlam3mMW3pG02toNvTuQA8SWzPgg46g8MEK7vdBeyiM+z9oEX0e+GAL4IOOoJYPJq9V5Iz0PU2pMHn1PrQlXbt8d0TaPqtBZOT3QNbFXOxKX1YjWULuf+RnMrPxJTANgS7V5DKWFGy0V4h/7YWzDmZPi9H27hZv9I8NPe+SZfaZeJm9STlUKVaszJphcv4w5dcTiW/3+MOMOy4xK2EGb61bI+ZJvueDVCBEFnQERfjTVb02c8JM385HNEky/UimSxpQ78s0hBBj5Nlr60F3Aquk823GMzbII7maxNsk5+YPJaEORk9L0eoKToZempeyMMSUZEXlQSsUKySc3+iwLmkXg8c9MeOyfOZx1B+JevD2ui3d4gTf80FNj0wpxkNZ2KPSr90bidu4fFB4NCU9y1M8hs/KRxo7wwf9CcxjDDHGXJeqlXmXwMJ5RhM/T/V7WQxqT+1olQWnp/NxFPvGM0xj+0SoZGAnTL9ZRkCWMve2+hlnL8i0rHjwtrotKeQMD9kfPOqhPDDlLpKTS9cuAxZJOI8diOcQyaaaU2Zlmo9UGN0HCwkQY1nephIl6tPZ8xQ93kDYMBhNQprSV7QONaWmrbUFNy3LnoaqodoirFGsPE1YrYRNAxb67IyjRitSF5w3N9GtsVry8Ewf5Ph90LxWGlfxEU2uFr2YrlKWGMn0MfORBq7gg0YCmXS3Re/uDYpA6rRD3/58TfJt1LV0uadWtNqC8xkljiNByJD6oCrCGsXyhK/zQTtha3QdwRvrtjgZT/BMH/T2R1KVcS3bUJGCeG5Ek/4c0yadPmY+J3zQSmCTzf48ZV84e2VhXGA0ldeD2kuV5/z0q9qCC/faztJt0OODqghrFHunDxZm3Dpz9PE9uR48pdsu1oNVRigu5bRrt8biFo11sd6LZeLk08fKp84Hywks+pnGmCpsmAwb3EJUyMdQm94k73OlU7S0D0JX3mq0yoJLQ7/UcdRtUNDvYhMeAdco9iYfdM44fZrUBv+zbnvYH/wwpc9jVCvCIqnXsr3b4yRfDUlkpQ8x6hvoeV8qfbCcwLzuM2fboSwhyvqkp0nvb2baytlootC35jxz7T1X66kdrbLg0tCzOnKWomXLfpaSImC/Ym/zQT2HeRyyxOvXgzx4E92WFbJ90j9kPNEHP7vY7X2J7ExSFHItXUQs59C55Xo71tMiQQt9qfbBYgLs/kpCnDRFaZrKtzSaWPSY/UBSmbq0EmJsOxrNq1Bwcehzl1NIEozrrxmdAvYpVkz4Kh+0cyiNcDn4Fbq1FfI4HwTd88etm0ujSRj/WQI/CnwQXM3LfBA22CHwQXA17/LB/D9doA/gg+Bq3uKD5o9DwE9zlQ/iwIEDx4uO9j4IAAAdAB8EAPQOfBAA0DvwQQBA78AHAQC9Ax8EAPQOfBAA0DvwQQBA78AHAQC9Ax8EAPQOfBAA0Dv/AXWwW1DatfLfAAAAAElFTkSuQmCC" alt="" />

demo:http://runjs.cn/code/c3bfbze3

text-overflow 的可选值有三种

    clip:默认值。直接截断。

    ellipsis:三个点儿(...)

    (string):自定义文字。如果这个问题太长,也会被截断

text-overflow 还可以设置两个值,对应左右分别采用不同的处理方式,这里的左右貌似和文字方向没什么关系。如下:

  text-overflow: clip ellipsis

只有firefox支持,没多大意义。我自己没有试出来效果。详见:https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-overflow

二:css处理多行文本

上面说的只能处理单行,你也看到了,它要求文字不能换行。

如果遇到多行文本的溢出处理,就需要 line-clamp 出马了

p {
overflow: hidden; /* 非必须,但是不设置效果不对 */
display: -webkit-box; /* 必须是webkit-box */
-webkit-line-clamp:; /* 文本行数 */
-webkit-box-orient: vertical; /* webkit-box的纵轴方向 */
}

aaarticlea/png;base64,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" alt="" />

demo:http://runjs.cn/code/2qdpzcoi

注意,元素必须声明成webkit-box,真的好奇怪,这会导致一系列问题(比如元素高度和宽度的计算会不同),需要特别注意

声明为 "display: flex" 不起作用。可能需要添加其他辅助属性。就不实验了。flex和-webkit-box的互换性还是糊里糊涂的。

如果不写 "overflow:hidden" 效果还是有的,但明显不是你想要的

aaarticlea/png;base64,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" alt="" />

opera有自己的实现方式,但不是web标准,所以作用不大。

不过这种方式跟以前的属性更有传承,而且貌似更符合一般人的直觉。

.last-line {
height: 3.6em; /* 需要指定高度 */
text-overflow: -o-ellipsis-lastline;
}

三:js polyfill

css 不够, js 凑。

是的,就这样。

上面说的处理多行的方法兼容性太差了,用在实际项目上的机会恐怕不多(除非是直接使用 webkit 做 App)

真正可行的还是各种polyfill。

clamp.js : https://github.com/josephschmitt/Clamp.js     看文档提不错的,优先推荐。可以不指定行数,可以指定动画
ftellipsis : https://github.com/ftlabs/ftellipsis                   备选
succinct : http://micjamking.github.io/succinct                不怎么样,截取字符串来实现的

四:纯 css 实现的 polyfill

纯 css 实现的 ellipsis 效果。

demo:http://codepen.io/romanrudenko/pen/zhweq

原理就是:

外围包裹容器 wrap

    需要有明确的宽高

    overflow: hidden 

使用 ::before 创建 prop 元素,目的是给 realend 定位

    向左浮动

    需要与外围的大容器(wrap)等高

    需要有一定的宽度,目的是为了让 realend 被 main 挤开后能排在正确的位置上。

文字容器 main 元素

    向右浮动

    负的左外边距(margin-left)抵消 prop 的宽度对 main造成的影响

使用 ::after 创建 realend

    向右浮动

    负的左外边距(margin-left)与自身宽度相等,抵消自身的宽度。元素实际的宽度为0

    设置 padding-left 的值与 prop 相等。当 main 高度比prop高时,realend 被挤压到prop下方,这也是 prop为什么需要跟外围大容器(wrap)等高的原因

    设置为相对定位,使其能停留在相对大容器(wrap)的正确位置上

根据浮动原理,浮动元素会到达他能到达的最靠近上方的地方

当 main 中的文字没有溢出时,realend 在同为右浮动的 main 的下方,由于在大容器外,所以不会被显示出来

当文字使得 main 的高度大于 wrap 时,realend 被挤压到 prop 的下方,再设置相对定位,则会固定显示在 wrap 的右下角

设计还是非常精妙的,值得学习。

详见:http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

溢出文本省略号表示的css实现及polyfill的更多相关文章

  1. 溢出文本省略号的js实现

    function ellipsis(element) { var limitWidth = element.clientWidth; var temp = element.cloneNode(true ...

  2. css单行文本与多行溢出文本的省略号问题

    在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...

  3. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  4. CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)

    http://www.52css.com/article.asp?id=602 ===================================================     html ...

  5. CSS 文本和表格中文字溢出显示省略号

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  6. css如何实现多行文本时,内容溢出,出现省略号

    一:单行文本出现省略号: .oneLine{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100px; ...

  7. 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题

    上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...

  8. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  9. css 溢出文本显示省略号

    这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...

随机推荐

  1. VCS常用指令

    常用命令介绍 对VCS的常用命令进行介绍,便于工程师进行日常维护.本手册描述的命令仅供参考,具体描述请以Veritas公司提供的相关资料为准. VCS的安装和命令都在下列目录下:sbin, /usr/ ...

  2. Linux下添加php的zip模块

    今天早上开发的人员过来跟我说,测试机上的XX项目报了个错: include(ZipArchive.php): failed to open stream: No such file or direct ...

  3. 第1课 GUI程序原理分析

    1. 命令行应用程序 (1)命令行应用程序的特点 ①是一种基于顺序执行结构的可执行程序 ②程序执行过程中不需要与用户产生交互 ③程序执行后给出最终的运行结果 (2)命令行应用程序的运行模式——程序运行 ...

  4. 一个检测网页是否有日常链接的python脚本

    在大的互联网公司干技术的基本都会碰到测试.预发布.线上这种多套环境的,来实现测试和线上正式环境的隔离,这种情况下,就难免会碰到秀逗了把测试的链接发布到线上的情况,一般这种都是通过一些测试的检查工具来检 ...

  5. leetcode532

    public class Solution { public int FindPairs(int[] nums, int k) { var pair = new Dictionary<strin ...

  6. 「小程序JAVA实战」小程序的微信api菜单操作(67)

    转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66/ 菜单按钮的介绍, ...

  7. Unity XLua 官方案例学习

    1. Helloworld using UnityEngine; using XLua; public class Helloworld : MonoBehaviour { // Use this f ...

  8. js中改变文档的层次结构(创建元素节点,添加结点,插入子节点,取代子节点,删除子节点)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. fabric本地一键部署LAMP

    一.添加普通用户jeff执行sudo时无需输入密码 $ sudo vim /etc/sudoers ---------------------------------------> ## All ...

  10. classpath 和 classpath* 的区别:

    classpath指的是java代码生成的class的路径. classpath 和 classpath* 区别: classpath:只会到你的class路径中查找找文件; classpath*:不 ...