当内容超出容器宽度时做何处理? text-overflow

by · 2013年12月09日 · 384 Words · ~1min reading time | Improve on

原文链接：当内容超出容器宽度时做何处理? text-overflow

text-overflow 的作用:

text-overflow 用来声明：当内容超出容器宽度时做何处理。

text-overflow 语法:

text-overflow: [ clip | ellipsis | <string> ]

简单的说明：text-overflow的默认值为clip，即当内容超出容器时，会裁切掉超出的文本；当text-overflow值为ellipsis时，会用省略号替代超出的文本；也可以用特定的字符串来替代超出的文本（目前仅 firefox 支持）。

text-overflow 起作用的前提:

容器要有一定的宽度，没有宽度就谈不上内容超出容器。例如：对一个普通的inline元素应用text-overflow不会有效果。
容器的overflow属性值不能为visible。因为overflow:visible会使内容溢出容器。同时为了避免出现滚动条，通常不使用overflow: auto 、 overflow: scroll而采用overflow: hidden
容器必须能强制内容不换行，例如使用：white-space: nowrap

text-overflow 示例:

省略号样式 总结如下：

.ellipsis{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

参考资料：

Tags: css

`