超出文本内容用...表示
来源:互联网 发布:男士去油洗面奶 知乎 编辑:程序博客网 时间:2024/06/06 17:43
首先,要知道css的三条属性。
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
这三个是css的基础属性,需要记得。
但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢?
css3解决了这个问题,解决方法如下:
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
-webkit-line-clamp:2; //这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。
最后的css样式如下:
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
1.常规css方法——可以实现IE,Safari,chrome,opera浏览器下文字溢出省略号表示
.zxx_text_overflow_1{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}
2.使用ellipsis.xml文件使Firefox支持文字溢出后点点点省略号表示.zxx_text_overflow_2{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('../xml/ellipsis.xml#ellipsis'); overflow:hidden;}
这里有个小结论:这个使Firefox浏览器下文字溢出省略号表示的ellipsis.xml文件要在页面的同一目录下,或是下一级目录下(我已测试),要是向上跨文件夹访问或绝对路径访问则失效。原因不详!3.使用:after伪类和content实现文字溢出后省略号表示(严重不推荐!直接跳过)
愤慨:我实在忍不住了,我要臭骂一通。我很久之前就自己试过content实现后面的省略号表示,发现问题很多,遂想了其他方法。
今天我本想找以前一位兄弟使用图片实现类似效果的方法,发现网上突然出现了标题“为兼容IE,FF文字溢出省略号显示的文章”,其实就一篇,很多我很鄙视的教程网站都有(正好打上了热门关键字啊)。
我原本试试介绍这个方法的,但是我实在做不下去了!这个方法根本不行,一点都不行!要是N年前,只有IE6和Firefox浏览器的时候,这个方法或许可以试试。现在根本不行,在现在看来,写文章的人就是个大草包,要么是个史前时代过来的程序员,文章里面错误一大堆,用胡说八道形容一点都不为过,很多东西根本没有经过验证就那儿大放厥词。1、说是兼容,其实反而大大破坏了兼容性,IE6和IE7下的表现就不一样,一句IE“不支持max-width”就让我想给作者扇个耳光,IE7不支持吗,别告诉我你写这文章时还没有IE7浏览器。2、本来chrome浏览器,Safari还有opera可以实现文字溢出省略号显示的,现在受限与:after和content,就会一处理不当,文字直接被截,就很丑了。3、多套用了一层标签,css也多了好几行,没有必要,资源消耗高。4、当文字很短时后面也还跟着个省略号,没有溢出为什么还要显示省略号呢?
总之,结论就是这个方法一点点实用价值都没有。所以严重不推荐!
4.我自己想出来的方法:margin负值定位法——兼容所有主流浏览器
这是一个比较短的文字。…
这是一段比较长的文字,用来测试是否文字溢出时会用省略号显示。…
HTML部分:
<div class="zxx_text_overflow_4">
<div class="text_con">这是一段比较长的文字,用来测试是否文字溢出时会用省略号显示。</div>
<div class="text_dotted">…</div>
</div>
CSS部分:
.zxx_text_overflow_4{width:24em; height:1.3em; overflow:hidden; zoom:1;}
.zxx_text_overflow_4 .text_con{float:left; height:1.3em; margin-right:3em; overflow:hidden;}
.zxx_text_overflow_4 .text_dotted{width:3em; height:1.31em; float:right; margin-top:-1.3em;}
简要说明:此方法兼容IE6,IE7(IE8未测过),Firefox,chrome,Safari,opera浏览器。没有hack,没有生僻的css样式。文字短时,没有省略号,文字溢出时就出现省略号。可以说是相当不错的一个方法。原理也很简单:当文字内容足够长时就把隐藏在上面的省略号层给挤下来了。关键就是点点点所在div层的高度的绝对值要比其margin的绝对值大那么一点点。
5.jQuery限制字符字数的方法
我的文字个数较少,不要杀我!
你个杀千刀的,怎么写了这么多的文字,我要被拦腰...
HTML部分:
<div class="zxx_text_overflow_5">你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!</div>
没有css啦,只有js代码:
$(document).ready(function(){
//限制字符个数
$(".zxx_text_overflow_5").each(function(){
var maxwidth=23;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'...');
}
});
});
6.jQuery自动判断宽度是否超出的方法
我的文字个数较少,不要杀我!
你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了...
HTML部分:
<div class="zxx_text_overflow_6">你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,kitty救我!</div>
css部分:
.zxx_text_overflow_6{width:400px;}
js部分:
var wordLimit=function(){
$(".zxx_text_overflow_6").each(function(){
var copyThis = $(this.cloneNode(true)).hide().css({
'position': 'absolute',
'width': 'auto',
'overflow': 'visible'
});
$(this).after(copyThis);
if(copyThis.width()>$(this).width()){
$(this).text($(this).text().substring(0,$(this).html().length-4));
$(this).html($(this).html()+'...');
copyThis.remove();
wordLimit();
}else{
copyThis.remove(); //清除复制
return;
}
});
}
wordLimit();
阅读全文
0 0
- 超出文本内容用...表示
- HTML a 标签文本内容超出使用...表示
- 文本超出部分用省略号表示
- html文本超出用省略号表示
- textview文本超出部分用省略号表示
- css 控制超出内容 用省略号表示
- css控制文本超出部分用省略号表示
- css设置文本超出两行 末尾用省略号表示
- 文本内容溢出用省略号(...)表示
- 判断TextView文本内容是否超出一行
- 文本内容超出后显示省略号效果
- 判断TextView文本内容是否超出一行
- 文字超出范围用...表示
- 在GridView中,设置字符超出单元格部分的内容用“...”表示
- 前端实战——完美解决文本框超出内容用“……”表示,鼠标滑过时显示隐藏内容
- table 中超出单元格内容使用省略号表示
- CSS控制文本内容固定行行显示,超出部分“...”
- Textview超出尺寸用...来表示
- 讲给Android程序员看的前端教程(03)——HTML5标签(2)
- lintcode---旋转图形
- 敏捷武士:看敏捷高手交付卓越软件
- OpenGL学习: 环境纹理映射(environment mapping)
- 一项关于深度学习在医学影像分析中的调查
- 超出文本内容用...表示
- jsp调用java函数的方法
- 点击哪个元素显示哪个的序号,三种解法~
- Spark整合Hive
- easyui-window的z-index失效
- 宏,将一个数字的奇数位和偶数位交换
- SPOJ 297 Aggressive cows 最小间隔
- linux 驱动——时间、延时及延缓操作
- OPENGL学习笔记之六