有时候我们在做网站的时候,会遇到标题文字内容溢出或者说是超出宽度的问题,这时候大家一般会直接用截断的方法吧,就是限定宽度高度,然后加overflow:hidden。这样做虽然可以解决问题,不够再美观上可能就不太好看,

那这时候 我们是不是可以想到,如果溢出的内容用省略号代替的话, 是不是会美观很多了咧。

<div>这是总共二十个文字的一个段子,可以截断文字吗</div>

现在直接用css代码就可以实现:

1.先设定字数宽度

2.文字不换行

3.溢出隐藏

4.使用text-overflow 设定效果

css代码如下:

div{  width:20em;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

ps :旧版本的ff不支持 text-overflow属性,不过7.0之后就支持了

   
© 2012 Ai-WEB的博客 Suffusion theme by Sayontan Sinha