#text-overflow属性

关键字: text-overflow:ellipsis
语法:text-overflow : clip | ellipsis

取值:
clip :默认值 。不显示省略标记(...),而是简单的裁切.
ellipsis: 当对象内文本溢出时显示省略标记(...).

可惜text-overflow 还只是ie的私有属性而已,也没被收录到w3c标准里 .

如果想让某个容器(div或者li或者...块级元素)显示一行文字,当文字内容过多时,不换行,而是出现...
这样写:例如
Html代码

  
  
  
  
  
  
  
  
胡中齐Vinch

注意:他们一定要一起用

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

1.一定要给容器定义宽度.
2.如果少了overflow: hidden;文字会横向撑到容易的外面
3.如果少了white-space:nowrap;文字会把容器的高度往下撑;即使你定义了高度,省略号也不会出现,多余的文字会被裁切掉
4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉,就相当于你这样定义text-overflow:clip.
如果容器是table,当文字内容过多时,不换行,而是出现...
这样写:例如
Html代码

  
  
  
  
  
  
  
  
胡中齐Vinch



胡中齐Vinch

注意:
1.一定要给table定义table-layout:fixed;只有定义了表格的布局算法为fixed,下面td的定义才能起作用。
其它的要点和上面一样

text-overflow 的兼容性:
测过ie6,ie7,ff3,safari,opera,chorme,只有ff3和opera不兼容

你可能感兴趣的:(#text-overflow属性)