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

2017/04/2222:09:10ul li列表中显示文字强制不换行 大于li宽度文字自动隐藏已关闭评论 818

ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏

如何实现li列表中显示文字强制不换行,大于li宽度自动隐藏文字,这种效果在新闻列表中时很实用的,下面示例,可以参考下
涉及关键属性的语法:

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属性(特性)

一般用法:

width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin