实现文字多行省略

CSS文字折行与省略号 发表于2011/04/22 相关的几个属性和w3schools的参考如下: white-space 属性设置如何处理元素内的空白.http://www.w3schools.com/css/pr_text_white-space.aspwhite-space: normal | nowarp | pre | pre-line | pre-warp | inherit word-warp 属性设置如何处理单词的折行http://www.w3schools.com/css3/c

在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div区域的情况,此时比较好的做法就是当文字超过限定的div宽度后自动以省略号(-)显示,这样,按照习惯,人们都会知道这儿有文字被省略了.省略又分为单行省略和多行省略.我们常用的是单行省略代码如下: html代码: <div class="text1"> 这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话 </div> <b

前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正是从那么多千篇一律的文章中跳转过来的,想找更好地方案的.那恭喜你,没有更好的,只有更合不合适的,当然,前提是我的文章流量够多,能被顶上去你才有机会看到. 这里介绍三种多行文本截断的方法,当然第一种就是你看到想吐的-webkit-line-clamp方案,不想看就直接跳到第二种方法开始看啦. 使用-w

虽然ie9逐步淘汰淘汰了,但是--为了兼容ie8的多行省略功能,jq插件ell jQuery.fn.ell = function(count) { for(var i = 0 ; i < $(this).length; i ++){ var ele = $(this).eq(i); //words的width和height var W = ele.width(); var H = ele.height(); //get element's children p var p = ele.find(

今天遇到一个需求,需要计算label中文字的行数.想了好久也没想到好的解决方法,就在网上找了下.结果发现一篇文章是讲这个的.这部分代码不但能够求出一个label中文字行数,更厉害的是能够求出每一行的内容是什么: 代码如下. #import <CoreText/CoreText.h> - (NSArray *)getLinesArrayOfStringInLabel:(UILabel *)label{ NSString *text = [label text]; UIFont *font = [

div css文字字体行高行距 深入理解css行间距设置 div css文字字体行高行距 DIVCSS5带您深入理解css行间距设置,字体行距如何最简单地设置. 在文章中,要实现调节设置每行文字字体间距(行距)是使用line-height属性.(体感音乐) 要使得每行的文字一定的间距距离所以可以通过line-height样式实现.接下来DIVCSS5通过DIV CSS实例实现字体文字上下间距. 相关扩展CSS教程: css line-height div css字间距 为了观察到行距设置效果,新

单行省略: selector{ text-overflow: ellipsis;/*这就是省略号喽*/ overflow: hidden;/*设置超过的隐藏*/ white-space: nowrap;/*设置不断行*/ width:200px;/*设置宽度*/ } 多行省略: 因为移动端浏览器绝大部分用的是webkit内核,所以可以用-webkit-line-clamp属性. -webkit-line-clamp用来限制在一个块元素显示的文本的行数. 为了实现该效果,它需要组合其他的WebKi

单行省略: white-space  : nowrap; overflow     : hidden; text-overflow: ellipsis; 多行省略: overflow: hidden; max-height: 44px; text-overflow: ellipsis; -webkit-box-orient: vertical; word-break:break-word; /* autoprefixer: off */ display:-webkit-box; -webkit-

#news_text { border: 1px solid red; width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /*这里可以设置文本显示的行数*/ overflow: hidden; } <div id="news_text"> 要溢出去的文字