实现多行文本溢出显示省略号的两种方法

实现多行文本溢出显示省略号的两种方法

ok，这是本菇凉的第一篇博客( •̀ ω •́ )✧
刚毕业涉世未深的小女孩在如今这个信息爆炸的时代，看到行业那么多“大牛”、大神“、“大佬”等大大们，可以说是相(瑟)当(瑟)崇(发)拜(抖)了。崇(发)拜(抖)的同时，心里暗暗的想，我得努力啊，我得紧紧跟随前辈们的步伐呀，虽然智商是硬伤，但是勤能补拙笨鸟先飞就可以吃到虫子了呀(￣▽￣)／！ 咳咳好的，那么呢，以后在学习工作中遇到什么感觉值得记录的问题啦，经验啦，都会记录在这里，方便随自己对所学知识进行归纳总结，而且说不定还能帮助到需要的人，简直是完美啊~ 那么问题来了，博客怎么编辑才好看啊啊啊，咋跟word不一样嘞W(￣_￣)W
哎，废话太多，进入正题~

在我们实际项目操作中，比如说新闻资讯页的制作，由于每条新闻的标题、内容字段长度不同，显示的情况也层次不齐不尽人意，分分钟逼死强迫症嘛，因此在前端页面的展示中，就要对其进行一定的样式调整，文本溢出显示省略号就很好地解决了这一现象，表现形式十分友好。在我的归纳总结中，纯css和js（准确的说是jQuery）都可以完成这一效果，好的，代码你可以粗来了，憋坏了吧小代

1. css实现

overflow:hidden;
text-overflow:ellipsis; 
display:-webkit-box;
 /* autoprefixer: off */
-webkit-box-orient:vertical; 
/* autoprefixer: on */ 
 -webkit-line-clamp:2; //想显示多少行

2. jQuery实现

效果展示

//html就不贴了，就是一个p段落包裹文字。大概原理就是：通过判断字符串的长度，进行截取，并追加省略号
var str = $("#song").text();
 var tempt = str;
 coverup();
 function coverup() {
     if (str.length > 17) {
         $("#song").text(tempt.slice(0, 17) + "...");
     }
     var readmore = "<a οnclick='showmore()'  style='color: orange;'>查看更多↓</a>"
     $("#song").append(readmore);
 }
 function showmore() {
     $("#song").text(str);
     var readmore = "<a οnclick='coverup()'  style='color: orange;'>收起↑</a>"
     $("song").append(readmore);
 }

以上就是我平时有用到的一些方法啦，基本上是够用了吧，其实简单的省略号隐藏css就够用了

等等 我还是再把单行隐藏也写一下吧。。

 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;

溜~~~~~~~~┏(＾0＾)┛