CSS基础(part18)--溢出的文字省略号显示

tech2025-11-15 4

学习笔记，仅供参考，有错必纠

参考自：pink老师课堂笔记

文章目录

溢出的文字省略号显示white-spacetext-overflow溢出的文字省略号显示三部曲举个例子

溢出的文字省略号显示

white-space

white-space设置或检索对象内文本显示方式，通常我们使用于强制一行显示内容：

white-space: normal; /*默认处理方式*/ white-space: nowrap;　/*强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。*/

text-overflow

text-overflow设置或检索是否使用一个省略标记（...）标示对象内文本的溢出：

text-overflow : clip; /*不显示省略标记（...），而是简单的裁切 */ text-overflow：ellipsis; /*当对象内文本溢出时显示省略标记（...）*/

溢出的文字省略号显示三部曲

/*1. 先强制一行内显示文本*/ white-space: nowrap; /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis;

举个例子

HTML页面：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> <style> div { width: 100px; height: 50px; border: 2px solid red; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div> 安徽财经大学统计与用用数学学院安徽财经大学统计与用用数学学院安徽财经大学统计与用用数学学院安徽财经大学统计与用用数学学院 </div> </body> </html>

页面：

最新回复(0)