在实际的项目中,因为client浏览器文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其它标签,下同)区域的情况.此时比較好的做法就是当文字超过限定的div宽度后自己主动以省略号(-)显示,这样.依照习惯,人们都会知道这儿有文字被省略了. 使用CSS截断字符串方法 CSS中有个属性叫做text-overflow:ellipsis. 说明:长处是内容能够为不论什么HTML元素.包含超链接和图片等,在IE6中还会在结尾自己主动显示省略号.缺点是必须指定宽度数值.而且宽度不能…
一:单行文本出现省略号: .oneLine{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100px; line-height: 30px; border: 1px solid red; } <div class="oneLine"> 你好啊 我是实现单行文本的例子,你看到了吗 </div> 二:多行文本出现省略号 1.WebKit浏览器可以使用. .a{ over…
大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏览器兼容 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head><style> p{…
1.jQuery限制字符字数的方法代码很简单,使用也很方便,如下: $(document).ready(function(){//限制字符个数$(“.zxx_text_overflow”).each(function(){var maxwidth=23;if($(this).text().length>maxwidth){$(this).text($(this).text().substring(0,maxwidth));$(this).html($(this).html()+’…’);}});…
jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(“.text”).each(function(){ var maxwidth=23; if($(this).text().length>maxwidth){ $(this).text($(this).text().substring(0,maxwidth)); $(this).html($(this).html()+’…’); } }); }); <div class="text" style…
我们经常会遇到文字太多,而为了不打破原有布局,需要将多出文字用省略号代替,实现以下效果: 文字太太太太多多多啦...... 这个不多. html:这是个列表.ul/ol都行. <ul> <li>这是个短句子</li> <li>403是因为服务器拒绝了你的地址请求,或者你根本没权限访问网站,提供身份验证也没用,也就是说,用户被禁止访问了.然而除非与Web服务器管理员联系,否则一旦遇到403状态码都无法自行解决.</li> </ul> 首…
如果帖子内容以图片开始,并且开启了游客看小图功能,那么图片下面的文字也会被隐藏,这是不科学的(在图片上边的文字不会被隐藏)查看DZ源代码,发现是程序猿疏忽漏掉了</div> 下边1314学习网给出解决办法:打开文件:template\default\forum\discuzcode.htm搜索 <p class="xg1 y">$attach[dateline] {lang upload}</p> 在下边添加: </div></di…
white-space: nowrap; /* 内容超出容器宽度时强制不换行 */ overflow: hidden; /* 内容超出容器时隐藏超出部分 */ text-overflow: ellipsis; /* 隐藏部分显示成"..." */…
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> </head> <style type="te…
<div class="title">当对象内文本溢出时显示省略标记</div> 这是一个例子,其实我们只需要显示如下长度: css实现网页中文字过长截取... title class应该这样写: .title{ width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 说明: 1.宽度一定要设置,可以根据实际需求调整. 2.white-space:nowrap是禁止文字…