这次给大家带来CSS定制文本省略的方法，CSS定制文本省略的注意事项有哪些，下面就是实战案例，一起来看一下。
WeTest导读
拿到设计MM的设计稿，Oh NO，点点点后面又双叒叕加内容了，弹丸之地，劳心费神啊！！可怜我们UI开发GG每次苦口婆心说，微臣不是不做，是办不到啊！很是愧疚。而现在，自从用了定制多行省略，腰不酸了，手也不疼了，接起需求来，毫不费劲！
一、什么是多行省略？
当字数多到一定程度就显示省略号点点点。最初只是简单的点点点，之后花样越来越多，点点点加下箭头，点点点加更多，点点点加更多加箭头…。多行省略就是大段文字后面的花式点点点。
同行这么做：
1.Google Plus用透明到白色的渐变遮罩，渐变遮罩在文字超出的时候才显示，但无法挤出文字，且背景只能纯色，不理想。
2.豌豆荚则更简单粗暴换行显示，换行显示则文字未超出时依然显示 …xxx，更不理想！
我们这样做：
立即学习“前端免费学习笔记（深入）”；
在QQ浏览器的页面用了一个原创的mod-more UI组件，实现了定制的多行省略，还是纯CSS的，领先同行一大截，赞！赞！赞！只可惜，mod-more组件的高度是固定的。对mod-more进一步进化，完美自适应高度，而且代码简化易用。
二、怎么做到的？
定制多行省略 = 按需显示…更多 + 文字溢出截断，按需显示…更多是用浮动特性实现，文字溢出阶段可以用前置浮动和line-clamp实现，QQ浏览器现有方案就是前置浮动，但缺点是高度固定，使用line-clamp则自适应高度，完美！限于篇幅，这里只提line-clamp的实现方案，QQ浏览器将在下阶段升级至该方案。
原理详解！
按需显示…更多
@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
placeholder
...更多
利用右浮动原理——右浮动元素从右到左依次排列，不够空间则换行。蓝色块、粉色块、橙色块依次右浮动，蓝色块高度小于6行文字时，橙色块在右边，蓝色块高度大于6行文字时，左下角刚好够橙色块排列的空间，于是橙色块就到左边了
@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
placeholder
...更多
进一步将橙色块偏移到正确位置就大功告成了！细心的同学会发现，将橙色块加上渐变底就是Google Plus在用的方案。
文字溢出截断
@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
-webkit-line-clamp是webkit内核的私有css属性，用于进行多行省略，在安卓和ios上全支持。但它固定使用省略号，无法直接扩展。而且自带了溢出截断逻辑，作用于容器高度。仔细考察可发现它使用的省略号是单字符…，可以用文字css属性如font-size,letter-spacing,color等控制。
@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*测试*/腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
设置外容器的font-size、letter-spacing、color，并在子容器里恢复就可以单独设置省略号。这里外容器设置font-size的值等于2倍行高（余下要撑开的宽度可用letter-spacing补足，也可仅用font-size撑开全部的宽度），color为transparent就可以让line-clamp既挤出文字又不截断容器高度，外容器高度达到7行而不是默认表现的6行，从而达到需要的溢出截断效果
合体！定制多行省略
@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*测试*/
腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
... 更多
将-webkit-line-clamp实现的文字溢出截断代码为主体，叠加绝对定位同步的按需显示…更多结构。因为绝对定位，这里使用百分比简化代码。最外包一层结构限制最大高度。
/* * 行高 h * 最大行数 n * ...更多容器的宽 w * 字号 f */@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}.ellipsis { position: relative; background: rgb(230, 230, 230); width: 260px; max-height: 108px; /* h*n */ line-height: 18px; /* h */ overflow: hidden; -webkit-animation: width-change 8s ease infinite;}.ellipsis-container { position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; /* n */ font-size: 50px; /* w */ color: transparent;}.ellipsis-content { color: #000; display: inline; vertical-align: top; font-size: 12px; /* f */}.ellipsis-ghost { position:absolute; z-index: 1; top: 0; left: 50%; width: 100%; height: 100%; color: #000;}.ellipsis-ghost:before { content: ""; display: block; float: right; width: 50%; height: 100%;}.ellipsis-placeholder { content: ""; display: block; float: right; width: 50%; height: 108px; /* h*n */}.ellipsis-more { position: relative; float: right; font-size: 12px; /* f */ width: 50px; /* w */ height: 18px; /* h */ margin-top: -18px; /* -h */}
腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
...更多
将橙色块偏移到正确位置，梳理了下代码，最终实现了自适应高度的定制多行省略，完美！从此妈妈再也不担心我在省略号后面加东西改东西了！恭喜你击败99%的同行了！
三、为什么这么做？
line-clamp有3宗罪
和 text-align:justify 一起用会使省略号和文字相叠
超出截断后会截掉部分行高
省略号出现在单词中间
定制省略当然某问题啦
ext-align:justify时如期所示，没问题！
截断时如期所示，也没问题！
省略号在有单词时如期显示，依然没问题！
更别说点点点花样增改
简单增改文字加链接只是小case
用折角还是其他图片表示文本溢出可以增添趣味
溢出时显示溢出字数增加了实用用途
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
推荐阅读：
css的绝对定位怎么兼容所有的分辨率
css中属性值继承如何使用
以上就是CSS定制文本省略的方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609417.html
微信扫一扫 
支付宝扫一扫 
