CSS中的overflow

 最开始是用一个函数来计算字数,然后根据大概的长度来切断字符串进行显示,以防止页面错位的出现.

 

        后来用一段CSS代码来设置错位的处理:

 

      text-overflow: ellipsis；
        white-space: nowrap；
        overflow: hidden；

 

        这段代码可以使超过定义的宽度和高度的时候,末尾以"..."结束显示.

 

        今天发现其实只要写了overflow:hidden；那么就不会错位了,一定会按CSS中定位的宽和高来显示,多余的都会被隐藏了,而查看源代码却又是完整的字符串.对搜索引擎很有利.在对div,li等元素使用此属性时,都需要设置高度和宽度的,如果不设置就会自动撑大显示区域,而达不到效果了.

 

        这样做了以后就不用使用切断字符串的函数了.

CSS overflow属性
w3pop.com / 2006-09-26

The overflow property sets what happens if the content of an element overflow its area.
当内容超出其所在元素的区域时overflow属性可以设置应该如何应对。

Inherited: No
继承性：无

举例

p
{
overflow: scroll
}

可用值

值	描述
visible	The content is not clipped. It renders outside the element 内容不会被省掉。会显示在元素的外面
hidden	The content is clipped, but the browser does not display a scroll-bar to see the rest of the content 内容会被省掉，但浏览器不会显示滚动条以用来查看剩余的内容
scroll	The content is clipped, but the browser displays a scroll-bar to see the rest of the content 内容被省掉，但浏览器会显示滚动条以用来查看剩余的内容
auto	If the content is clipped, the browser should display a scroll-bar to see the rest of the content 如果内容被省掉了，浏览器才会显示出滚动条