<li></li>列表中显示文字强制不换行,大于li宽度自动隐藏

li{

display:block;
font-size:14px;
height:16px;
line-height:16px;
width:330px;
white-space:nowrap;     //强制不换行
overflow:hidden;            //自动隐藏文字                                                                             
text-overflow: ellipsis;    //文字隐藏后添加省略号
-o-text-overflow:ellipsis; //适用于opera浏览器
}

涉及关键属性的语法:

1、语法: 
text-overflow : clip | ellipsis 
参数: 
clip :  不显示省略标记(...),而是简单的裁切 
ellipsis :  当对象内文本溢出时显示省略标记(...)

2、
语法: 
overflow : visible | auto | hidden | scroll 
参数: 
visible :  不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 
auto :  此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条 
hidden :  不显示超过对象尺寸的内容
scroll :  总是显示滚动条

3、
语法: 
white-space : normal | pre | nowrap 
参数: 
normal :  默认处理方式 
pre :  用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象 
nowrap :  强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。参阅td,div等对象的nowrap属性(特性)

 

来自: http://hi.baidu.com/xiaowuphp/blog/item/0c4bef219181b4a94723e85e.html

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值