CSS一行省略

小蓝 • 2024-12-12 12:19 • 编程

一、加省略号的实际需求

在前端开发中，经常会遇到需求要求对某个元素内的文字或内容进行省略，以达到更好的页面展示效果。比如，我们的网站可能会有很多长篇文章，如果不对文章进行省略，那么有可能在手机端或者窄屏设备上就会出现排版混乱的现象。因此，CSS一行省略就成为了开发中的一个常用技巧。

举个例子，我们有如下一段简单的HTML结构：

<div class="content">
  <p>这是一段很长很长很长很长很长的文本内容……</p>
</div>

为了使这段文本内容在页面上展示时能够更加美观，我们可以使用CSS的一行省略来让这段内容以省略号的形式展示：

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

这段代码的作用是：

首先，我们把父元素的高度设为固定的数值，然后把子元素的height设为100%，这样这个子元素的高度就与父元素高度相同了。
接着，我们给

元素加上了一个display: -webkit-box;的属性，这个属性意思是把

元素作为弹性伸缩容器来显示，可以自动调整子元素的宽高来适应容器。

但是，这样设置后，文本内容也会像一个长弹性盒子一样随着屏幕宽度不停地伸缩，所以我们需要加上一些额外的设置，比如：

content {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

这样，我们就可以在宽度不够的时候用省略号代替了我们定义的元素的文本内容。这在显示产品名称、用户名等内容时非常有用和实用。

二、实现方法及注意事项

实现一行省略的方式有多种，这里我们介绍其中比较常见的三种方法。

1. ellipsis

这种方法需要在需要省略的元素中添加三个CSS样式：

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

这样就可以实现一行省略了。

2. line-clamp

这种方法是CSS3新增的样式，它可以实现对整段文本的多行省略。具体方法是：

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

这样样式设置后，我们的文本将最多只会显示两行，超过两行则被省略。

3. calc

这种方法需要计算省略的长度，适用于一些内容长度不固定的情况。具体方法是：

content {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.content p {
  width: calc(100% - 50px);
  display: inline-block;
  vertical-align: top;
}

这样我们就可以在文本长度超过设定值时实现自动省略了。

三、小结

CSS一行省略是前端开发中常用的技术，通过以上三种方式的介绍，我们可以对这个实用技巧有进一步的了解和掌握。记得在实际开发过程中，要根据需要选择合适的省略方式，并注意设置相应的CSS样式以达到最佳的效果。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/240032.html