css里文字变省略号,CSS 单行文字超出显示省略号

CSS 单行文字超出显示省略号

发布于 2020-12-07

阅读 981

每次写文本超出显示省略号的 css 时，总是记忆不清该怎么写。其实主要还是自己还没弄清其原理，只有花点时间去了解，我们才能更好的掌握。下面首先了解其中的两个主要属性：

1、white-space

作用：设置如何处理元素内的空白

属性：

① normal 默认属性。

(合并连续的空白符，换行符会被当作空白符来处理)

② nowrap 文本不换行。

(合并连续的空白符，文本内的换行无效)

③ pre 保留原格式。

(连续的空白符会被保留，在遇到换行符或者
元素时才会换行)

④ pre-wrap 保留原格式，自动换行。

(连续的空白符会被保留，在遇到换行符或者
元素时才会换行。此外超出盒子边界会自动换行)

⑤ pre-line 合并连续的空白符，自动换行。

(合并连续的空白符，在遇到换行符或者
元素时才会换行。此外超出盒子边界会自动换行)

各属性对比：

查看更多详情及其示例，点击这里。

2、text-overflow

作用：规定溢出容器的文本如何显示

属性：

① clip 默认属性。在容器最末端直接截断文本，可能导致最后的一个文本显示不完整

② ellipsis 省略号表示截断文本。

结合上面的知识点，对下面的代码，大家记忆应该会深刻不少。文本超出容器显示省略号的 CSS 实例：

p {

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}