CSS样式学习之--限定标签宽度,内容超出部分显示为省略号(...)

撑开

(

没有限定容器的

width)

或者

自动换行

(

限定了容器的

width)

，从而导致整个页面 结构出错，显示错乱。比如：

< /p>

所以需要将这些超出的内容显示为

省略号

(

…

)

，从而使得整个界面看上去协调 和美观。溢出显示省略

号用

text-overflow:el lipsis

属性实现，当然

需要为容器

限定宽度，即

width

属性。

< /p>

1.1

实现方法：通过以下三个属性组合实现省略号显示

overflow: hidden;

overflow

属性规定当内容溢出元素框时发生的事情。

text-overflow:ellipsis;

text-overflow

属性规定当文本溢出包含元素时发生的事情。

white-space: nowrap;

white-space

属性设置如何处理元素内的空白

.text-overflow{

//

将属性写成类，便于引用，通用性强！

overflow: hidden;

text-overflow:ellipsis;

white- space: nowrap;

}

效果如图：