深入探讨CSS3超出省略号的一些技巧

css3中的文本溢出（text-overflow）属性是一个非常有用的功能，它允许我们控制当一个元素的文本内容超过其容器大小时如何显示这些文本。默认情况下，超出容器的文本会被省略号（...）替代显示。在本文中，我们将深入探讨css3超出省略号的一些技巧和用法。

基础用法

首先，我们来看一下基础的text-overflow属性用法。它有三个可选的值：

• clip：裁剪超出容器的文本，不显示省略号。
• ellipsis：在容器的末尾显示省略号。（默认值）
• string：在容器的末尾显示指定字符串。

下面是一个简单的例子，展示了如何在容器末尾显示省略号：

div {
  width: 200px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

这将在一个200像素宽的div中显示一行文本。当文本超过容器大小时，它将被裁剪并用省略号替代。

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

使用before或after伪元素添加省略号

使用样式属性text-overflow实现文本超出省略号，一般都会是在容器的尾部添加省略号。这种方案是最简单的，但也是最常规的做法了。如果想要做出更多的亮点，那么，我们就需要思考一下更加创新的做法了。

使用CSS伪元素:before或:after可以很方便的添加省略号，这种方式通常可以实现比较特别的效果（比如：左对齐的省略号文本）。通过添加样式，我们可以控制伪元素如何显示并覆盖原始文本的显示。

下面的代码演示了在一个容器的右边添加省略号：

div {
  position: relative;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
}

div:before {
  content: "...";
  position: absolute;
  right: 0;
  top: 0;
  background-color: #fff;
  padding: 0 2px;
}

这将在容器的右边添加省略号。我们使用绝对定位将伪元素放置在容器的右上角，并给它添加了一个白色背景和一些内边距，以确保省略号可以被完全显示出来。

使用CSS3 calc()函数控制省略号可用空间

一览运营宝

一览“运营宝”是一款搭载AIGC的视频创作赋能及变现工具，由深耕视频行业18年的一览科技研发推出。

41

查看详情

CSS3中的calc()函数允许我们在CSS中使用数学表达式，这对于动态计算大小或间距非常有用。在超过省略号中，我们可以使用calc()函数来控制可用空间，确保文本和省略号能够被完整的显示出来。

以下代码演示了如何在一个宽为300像素的容器中显示文本和省略号：

div {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div span {
  position: relative;
  display: inline-block;
  max-width: calc(100% - 20px); /* 容器宽度-省略号的宽度 */
  vertical-align: top;
}

div span:after {
  content: '...';
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 100%;
  text-align: center;
  background-color: #fff; /* 背景色和容器一致 */
}

在上面的代码中，我们使用了两个关键样式：calc()函数和span元素。Span元素被设置为inline-block，它允许文本单独占用一行，而不会影响其他元素的呈现。使用max-width属性将span元素的最大宽度设置为容器宽度减去省略号的宽度，这样就可以确保文本不会超出容器的可用空间。

使用CSS3 Flexbox

CSS3中的Flexbox布局是非常有用的，它允许我们使用CSS来创建灵活的和响应式的布局。当我们需要在一个容器中显示多行文本时，并且想要在最后一行添加省略号，使用Flexbox布局就是一个很好的选择。

以下代码演示了如何使用Flexbox布局在一个宽为300像素的容器中显示多行文本，并在最后一行添加省略号：

div {
  display: flex;
  flex-direction: column;
  height: 80px;
  width: 300px;
  overflow: hidden;
}

div p {
  flex: 1;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

div p:last-child {
  overflow: visible; /* 显示容器溢出的文本 */
  text-overflow: '';
  white-space: normal;
}

在上面的代码中，我们使用了三个关键样式属性：display: flex，flex-direction: column和flex: 1。Flex容器被设置为flex-direction: column，使得子元素被纵向排列。每个段落元素被设置为flex: 1，以确保它将占用整个容器高度的空间。

最后一个段落元素被设置为overflow: visible，以便它可以溢出容器并显示所有文本。我们还将text-overflow属性设置为空字符串，以便它不会将文本裁剪为省略号。这样，最后一个段落元素中的文本就会在容器的最后一行自然地溢出，并且Flexbox布局会自动将省略号添加到最后一行。

总结

在本文中，我们探讨了CSS3超出省略号的一些技巧和用法。除了基础的text-overflow属性外，我们还演示了如何使用伪元素和CSS3 calc()函数来实现更具创意的效果。我们还介绍了如何使用CSS3 Flexbox布局来显示多行文本并添加省略号。无论使用哪种技术，要确保在显示文本时使用最佳实践，这将确保文本在各种上下文中得到良好的呈现。

以上就是深入探讨CSS3超出省略号的一些技巧的详细内容，更多请关注php中文网其它相关文章！