css 文字超出的省略号

css中的文字超出省略号技术让长段落的文字更易读，同时也美化了网页。在本文中，我们将深入了解省略号的几种不同形式，以及如何根据需要定义它们。

一、为什么要使用省略号？

当文字在网站或应用程序中超出了其容器的宽度或高度时，可以使用文本溢出截断技术来隐藏超出的部分并在文本末尾显示省略号。这种技术可使页面更加整洁，同时还能够避免文字溢出时页面排版出现混乱的情况。

二、如何在CSS中使用省略号？

要在CSS中使用文字溢出省略号，需要使用以下三个属性：

立即学习“前端免费学习笔记（深入）”；

1. text-overflow属性

text-overflow属性定义了当文本溢出容器时要发生什么。通过使用该属性，可以创建和定义下列文本溢出类型：

*clip：将文本溢出的部分截断。

*ellipsis：在文本溢出的部分与容器的边缘处显示省略号。

2. white-space属性

white-space属性用于定义文本的空白如何处理，包括空格、换行符等。通常我们使用以下三个值：

*normal：不强制换行，单词间空格自动调整。

*nowrap：不允许文本换行。

*pre-wrap：将文本按预定好的格式保留，如果文本中有空格就按照空格来进行分行。

3. overflow属性

overflow属性用于定义内容如何在其容器内部溢出。通常情况下我们使用以下两个属性：

*visible：允许内容溢出容器。

*hidden：不允许内容溢出容器，超出的部分被裁剪掉。

三、几种不同的省略号样式

1. 单行省略号样式

当要省略的文本只有一行时，可以使用单行省略号样式：

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

2. 多行省略号样式

当要省略的文本有多行时，可以使用多行省略号样式：

.ellipsis{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. 超过一定字符数量时使用省略号

.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

四、总结

通过使用CSS的text-overflow、white-space和overflow属性，我们可以通过几种不同的省略号样式来创建和定义文本溢出类型。其中包括单行省略号样式、多行省略号样式以及超过一定字符数量时使用省略号。这种技术可以使页面更加整洁，同时还能够避免文字溢出时页面排版出现混乱的情况。

以上就是css 文字超出的省略号的详细内容，更多请关注php中文网其它相关文章！