一、为什么要使用省略号
在处理网页设计时，常会遇到字体跑到边框外的尴尬事儿，显得很不协调。这时候，试试省略号技术！它会自动帮你遮挡那些跑出边界的字迹，再打上个省略号，提醒还藏着不少东西！这样一调整，画面看上去立马舒心多了，阅读体验也更流畅。
你的网站栏位太小了，放不下所有新闻标题，看着不舒服么？别担心，用省略号会更好！每条新闻后面加上一个省略号，既好看又不会打乱版面，进来看看的人也多了~
二、如何在CSS中使用省略号
搞定网页文字溢出边框后加省略号就这么几步： 1. 用 text-overflow 属性解决泄露问题；2. 选「clip」就直接剪，如果你想要省略号的话就选「ellipsis」吧；3. white-space 控制文本换行与否；4. overflow 则要看是藏起来过量部分还是显示出来；5. 别忘了微调一下字体大小和底色啥的。
比如，你手上有一堆新闻，每个新闻要占一整行。可是要是把这些全摆出来的话，页面就挤得慌。那怎么办？你试试看这个方法：
css
.news-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
不论标签有多长，全挤在一行也没问题多余的空间就用省略号代替吧～
三、单行省略号样式
如果你想在同一行里打好多字，又怕碍眼，那就用”…”代替。比如说，你得给网站的导航栏上个好几个链接，但又不想乱七八糟的，这个方法就能解决问题。那么简单地加几个省略号，导航栏就立马整洁多了，不用再忧心哪个链接太长占地方！
搞个省略号太简单，我们可是能直接在设置里搞定~ 就是把 white-space:nowrap, overflow:hidden 还有 text-overflow:ellipsis 这几个都加上就行咯~这样就算字数超出一行也不用担心，照样用省略号表示出来，整个页面看起来还是棒棒哒~
四、多行省略号样式
长文里的省略号让句子变短就像是看电视调快进那样轻松，特别是在小屏幕上阅读，留点空白也挺重要的。你见过没，看八卦新闻时，前面几句总会吊足你胃口，再说什么”待续· · ··更多猛料”之类的话。
是不是想让N行省略号看起来更酷炫？那就试试CSS的`-webkit-line-clamp`！这个功能可以控制文本显示多少行，多出来的部分会变成省略号，简单搞定！
.news-summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
这样，新闻摘要就会显示最多三行，超出部分会被省略号替代。
五、超过一定字符数量时使用省略号
有时候我们就想，只要文字多了那么几个符号，能不能自己给加上省略号？免得页面看起来太挤。这个时候，咱们的JavaScript小助手就能派上用场！它会自己看看文字有多长，一旦超标就把多余部分删掉，然后给加上省略号哈。
你想在博客名称后加上点号吗？少于20个字符的话没问题。不过超过的话，试试下面的方法吧:就在网页上用JavaScript添加就好！
“`javascript
别担心，超过的部分我帮你直接删掉，留下你想要的长度即可，超简单的！
let text = element.innerText;
如果字数太多，就删点儿东西！
直接让元素里的文字前边显示几个字，再加个”…”岂不是轻松解决问题？真的好简单！
}
找到所有’.blog-title’元素，别忘记看！
现在我们都把每个标题压缩成最多20个字，比如这个：titleElements.forEach(title => title = shortenThis(title, 20))。
只要标题超过20个字，博客栏就会自动出现省略号！
六、省略号的美观性和实用性
.ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
省略号真的很赞！不仅好看，还能让网页显得更时髦。如果页面上的东西太多，找起来可能会比较麻烦？那就在后面加个省略号来提醒用户“后面还有很多”，这样他们浏览速度肯定会加快，用着也更爽！
说真的，省略号是设计大师的绝佳帮手，用得好，页面会更漂亮！比如你买东西的时候，看到商品详情页有省略号，那感觉简直太好了，看起来既美观又吸引人，激发你想要疯狂购物的心情嘛～
七、省略号的兼容性和注意事项
现在大部分浏览器都懂得识别省略号，但有些旧版的可能不行。所以，你要留意别人用什么浏览器？保证大家都看得见！
省略号用多就乱套了，尽量少些。设计时要摸清情况再确定数量，这不仅让作品更美观，还不会影响体验效果。
.ellipsis{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
}
八、省略号在不同设备上的应用
都在用手机和平板，省略号可不能缺席！看东西还是要大小适中！不要以为省略就只是电脑能用，手机和平板也得优化下才行！
当看手机上新闻报导时，有的标题结束后会有个小点（…）。这样就能看清所有内容，不会被过长的字给遮住了，甚至还能用剩下的时间阅读全文~
九、省略号与SEO的关系
.ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
虽然省略号是美化文章的好东西，但是别忘了在做 SEO 的时候也不能忽视！毕竟，搜索引擎也得考虑到大家在浏览网页时的感受呀。太多的省略号堆在一起，可能会令搜索机器人都不知道你到底想表达啥～
用省略号时，记得要美感和SEO兼顾，别挡了搜索引擎的路。合理安排位置和次数，让用户看着舒服，搜索结果也不差。
十、总结与展望
其实省略号在网页设计中真的很管用！让网页看起来干净舒服多了，用户们都爱不释手。你说以后科技发展进步了会不会让它变得更好更多样化？那就只能拭目以待
亲们，互联网上页面前设计时你们什么时候用上省略号？快点来分享下，顺便点个赞转个发呗！
评论0