超过长度...

<div>
    <p>aaaaa</p>
    <span>aaaaa</span>
</div>

希望让以上代码在超过4个字符的时候显示aaaa...

 

共同css

1.要...的元素加一下css

overflow: hidden;
white-space: no-wrap;  //阻止换行
text-over: ellipsis;  //超过长度...

 

 

定宽解决方案

由于block可以定宽，所以例如div，p之类的元素都可以定宽高,直接设width就可以；（！p是块级元素！！只是人家不能像div一样往里面塞东西而已）

而span，a之类的行内元素不能定宽高，所以无法直接设width。

 

兼容到ie8及以上

p {
  width：xxpx；  
}

span {
  width：xxpx；
  display:inline-block  
}

 

兼容到ie7及以下

p {
   width:xxpx;
}

span {
  width：xxpx；  
  float：left；
}

 

由于*display：inline的那种解决方案通常是对应margin的问题，其在ie7及以下，最终是行内元素，不能定宽

所以只有float行内元素了。

若将此css作用在li元素下，会导致list-style-type不显示。

解决方法：在li元素中作用list-style-position：inside