display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
登录后复制
特点： display 隐藏元素后，不再占有原来的位置。
后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景：
配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
二、visibility 可见性 （了解）
visibility 属性用于指定一个元素应可见还是隐藏。
visibility：visible 元素可视
visibility：hidden 元素隐藏
登录后复制
特点：visibility 隐藏元素后，继续占有原来的位置。（停职留薪）
如果隐藏元素想要原来位置， 就用 visibility：hidden
如果隐藏元素不想要原来位置， 就用 display：none (用处更多 重点）
三、overflow 溢出（重点）
overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。
属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子， 请慎用overflow:hidden 因为它会隐藏多余的部分。
四、显示与隐藏总结
属性 区别 用途
display 显示 （重点） 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility 可见性 （了解） 隐藏对象，保留位置 使用较少
overflow 溢出（重点） 只是隐藏超出大小的部分 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围
css
javascript
公用处理：你先测出你的这个width:100px的DIV一共可以放下多少个字符。这里假设为“LEN”以下相关的也用此代替。公用的CSS处理：设置DIV的定宽100px，再加个overflow:hidden即溢出部分隐藏。
解法1(后台代码处理)：你先对你要输出的内容做strlen（）的处理，看你要输出的内容是不是超过了LEN，要是没有超过就给全输出，要是超了，就用substr()函数去适当的截取一个长度，再将它跟你的“......”连超来输出即可。
解法2（JS来做判断）：这个原理也跟解法1一样，只不过，你用来做判断的语言换了一种以及判断的处理放在的客户端来做。
方法:
首先，你得给你类似的DIV加个相同的name值，如name="linkDiv"。
其次，你可以在你的HTML页全输出后对调用一个JS函数，来对name="linkDiv"的DIV对其内容做一个处理。注意我这里要求你的更多放在name="linkDiv"之外，原因见后面。
JS函数可以这样写：
function formatStr(){
var i
var LEN= 30//这个值是上面讲到的LEN的值，我这里假设是30
var strLen = 0
var str = ''
var strDiv = document.getElementsByName("linkDiv")
for(i = 0i <strDiv.lengthi++){
strLen = strDiv[i].innerHTML.length
if(strLen >LEN){
str = strDiv[i].innerHTML.substr(0,LEN-6)
str += "......"//上面的 LEN - 6 是来自这里。
}
strDiv[i].innerHTML = str
}
}
以下附上我写的一个测试：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>测试一个SUBSTR</title>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" href="style/.css" type="text/css" />
<style type="text/css">
#wrap{
width:950px
height:auto
margin:0px auto
}
.linkDiv{
width:100px
height:auto
overflow:hidden
border:1px dotted #fff000
}
</style>
<script language="javascript">
function formatStr(){
var i
var LEN= 30//这个值是上面讲到的LEN的值，我这里假设是30
var strLen = 0
var str = ''
var strDiv = document.getElementsByName("linkDiv")
for(i = 0i <strDiv.lengthi++){
strLen = strDiv[i].innerHTML.length
if(strLen >LEN){
str = strDiv[i].innerHTML.substr(0,LEN-6)
str += "......"//上面的 LEN - 6 是来自这里。
}
strDiv[i].innerHTML = str
}
}
</script>
</head>
<body>
<div id="wrap">
<div name="linkDiv" class="linkDiv">//这个值是上面讲到的LEN的值，我这里假设是30//这个值是上面讲到的LEN的值，我这里假设是30</div>
<div name="linkDiv" class="linkDiv">//这个值是上面讲到的LEN的值，我这里假设是30//这个值是上面讲到的LEN的值，我这里假设是30</div>
<div name="linkDiv" class="linkDiv">//这个值是上面讲到的LEN的值，我这里假设是30//这个值是上面讲到的LEN的值，我这里假设是30</div>
</div>
<script language="javascript">formatStr()</script>
</body>
</html>
测试通过。
