css中的文字超出省略号技术让长段落的文字更易读，同时也美化了网页。在本文中，我们将深入了解省略号的几种不同形式，以及如何根据需要定义它们。
一、为什么要使用省略号？
当文字在网站或应用程序中超出了其容器的宽度或高度时，可以使用文本溢出截断技术来隐藏超出的部分并在文本末尾显示省略号。这种技术可使页面更加整洁，同时还能够避免文字溢出时页面排版出现混乱的情况。
二、如何在CSS中使用省略号？
要在CSS中使用文字溢出省略号，需要使用以下三个属性：
立即学习“前端免费学习笔记（深入）”；
- text-overflow属性
text-overflow属性定义了当文本溢出容器时要发生什么。通过使用该属性，可以创建和定义下列文本溢出类型：
*clip：将文本溢出的部分截断。
*ellipsis：在文本溢出的部分与容器的边缘处显示省略号。
- white-space属性
white-space属性用于定义文本的空白如何处理，包括空格、换行符等。通常我们使用以下三个值：
*normal：不强制换行，单词间空格自动调整。
*nowrap：不允许文本换行。
采用三层架构开发，前台集成了产品在线展示，用户注册、在线调查、在线投稿后台有类别管理\图书管理\订单管理\会员管理\配送范围管理\邮件列表\广告管理\友情链接管理等后台添加图书时自动生成缩略图和文字水印主要参考了petshop的设计架构、使用了Asp.net2.0中很多MemberShip、master等新功能后台管理地址/web/admin/ 超级管理员账号密码均为aspx1特别提示：该系统需要
*pre-wrap：将文本按预定好的格式保留，如果文本中有空格就按照空格来进行分行。
- overflow属性
overflow属性用于定义内容如何在其容器内部溢出。通常情况下我们使用以下两个属性：
*visible：允许内容溢出容器。
*hidden：不允许内容溢出容器，超出的部分被裁剪掉。
三、几种不同的省略号样式
- 单行省略号样式
当要省略的文本只有一行时，可以使用单行省略号样式：
.ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}- 多行省略号样式
当要省略的文本有多行时，可以使用多行省略号样式：
.ellipsis{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
}- 超过一定字符数量时使用省略号
.ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}四、总结
通过使用CSS的text-overflow、white-space和overflow属性，我们可以通过几种不同的省略号样式来创建和定义文本溢出类型。其中包括单行省略号样式、多行省略号样式以及超过一定字符数量时使用省略号。这种技术可以使页面更加整洁，同时还能够避免文字溢出时页面排版出现混乱的情况。
