欢迎来到天天文库
浏览记录
ID:10408794
大小:34.00 KB
页数:2页
时间:2018-07-06
《单行多行文本省略表示》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、文本省略表示1.单行文本overflow:hidden;white-space:nowrap;text-overflow:ellipsis;技术:CSS注意:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。说明:overflow属性规定当内容溢出
2、元素框时发生的事情,所有主流浏览器都支持,hidden值是指内容会被修剪,并且其余内容是不可见的。text-overflow属性是设置或检索是否使用一个省略标记(...)标示对象内文本的溢出,IE,Chrome和Safari支持,Firefox和Opera不支持,ellipsis值是指当对象内文本溢出时显示省略标记(...)。white-space属性设置如何处理元素内的空白,所有主流浏览器都支持,nowrap值规定段落中的文本不进行换行。2.多行文本.figcaption{backg
3、round:#EEE;width:410px;height:3em;margin:1em;}.figcaptionp{margin:0;line-height:1.5em;}$(".figcaption").each(function(i){vardivH=$(this).height();var$p=$("p",$(this)).eq(0);while($p.outerHeight()>divH){$p.text($p.text().replace(/(s)*([a-zA-Z0-9]+
4、W)(...)?$/,"..."));};});思路:
5、文本框高度固定为多行(比如height:3em),通过从后向前逐个删除末尾字符,直至文本高度小于文本框高度。技术:CSS+jQuery优点:跨浏览器
此文档下载收益归作者所有