为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字。这在列表条目,题目,名称等地方常用到。
代码如下:
.product-buyer-name{ //可以给定容器宽度限制,超出部分省略
max-width:110px;
overflow:hidden;
text-overflow:ellipsis; //clip : 不显示省略标记(...),而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(...)
white-space:nowrap; //规定段落中的文本不进行换行
} //以上三条都不能少
还有一种方法
<a id="123"> fjdkshfldjshfjdshajkfldhsjakfhdslajkhfdjklsa</a>
<script>
var tag = document.getElementById("123");
var text=tag.innerHTML;
if(text.length>15){
text=text.substring(0,15)+"...";
}
tag.setAttribute("title",text); // 利用title属性,使鼠标放在标签上时,显示缩进后的内容
</script>
网友评论