CSS超出两行及多行省略号的样式设置

一、基础使用

用CSS设置文本省略号,一般情况下只需要添加如下代码即可:


/* 单行省略号 */
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

/* 多行省略号 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

代码注释中的第一段是单行省略号的常用设置,主要通过overflow:hidden;white-space:nowrap; 来设置文本的隐藏和不换行,再加上text-overflow:ellipsis; 来显示省略号。而第二段是多行省略号的常用设置,主要通过display: -webkit-box;-webkit-line-clamp: 2; 来控制文本显示的行数,并加上overflow: hidden; 来隐藏省略的多余文本内容。

二、样式设置

上述使用方法中提到的样式效果相对简单,只有一种省略号样式,并且只能设置具体的行数。实际情况中,我们需要更多种类的省略号样式,比如:多行省略号中省略号位置的调整、省略号和文本间距的控制等等。下面是一些常用的技巧,通过巧妙地CSS设置,可以实现更多样式效果。

1. 调整多行省略号中省略号的位置

默认情况下,多行省略号中省略号的位置是居中的,想要调整位置需要使用一些技巧,下面是一种方法:


.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.2;  /* 行高 */
  max-height: 3.6em; /* 最大高度 = 行高 x 行数 */
  font-size: 16px;
}
/* 使用伪元素,实现省略号位置的调整 */
.clamp::after {
  content: "...";
  position: absolute;
  right: 0;         /* 距离父元素右侧 */
  bottom: 0;        /* 距离父元素底部 */
  padding-left: 30px; /* 省略号和文本间距,根据实际情况调整 */
}

上述代码中,.clamp 是包含文本内容的父元素,通过设置max-heightline-height 控制文本显示的行数和行高。其中line-height * 行数 = max-height。在伪元素::after中,使用position:absolute; 将省略号定位到父元素右下角,通过调整padding-left 控制省略号与文本的间距,从而实现省略号位置的调整。

2. 调整省略号和文本的间距

我们经常需要调整省略号与文本的间距,让布局更加美观。这里提供两种方法:


/* 方法一:使用 text-indent */
.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.2;  /* 行高 */
  max-height: 3.6em; /* 最大高度 = 行高 x 行数 */
  font-size: 16px;
  text-indent: 1em;  /* 省略号和文本间隔,根据实际情况调整 */
}

/* 方法二:使用 margin-right */
.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.2;  /* 行高 */
  max-height: 3.6em; /* 最大高度 = 行高 x 行数 */
  font-size: 16px;
}
/* 设置省略号与文本间隔 */
.clamp::after {
  content: "...";
  float: right;     /* 省略号靠右显示 */
  margin-right: 5px; /* 省略号和文本间隔,根据实际情况调整 */
}

方法一中,使用text-indent 设置文本缩进的大小,从而达到控制省略号和文本间距的效果。在方法二中,使用CSS浮动来将省略号靠右显示,再通过margin-right 属性来控制省略号和文本间的距离。

三、总结

通过本文的介绍,相信读者们可以掌握常见的CSS超出两行及多行省略号的样式设置方法。除了基础使用外,更多样式设置需要结合实际情况进行探索,灵活应用CSS技巧,才能实现更加美观实用的效果。

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
小蓝小蓝
上一篇 2024-12-12 11:58
下一篇 2024-12-12 11:58

相关推荐

  • 如何使用HTML修改layui内部样式影响全局

    如果您想要使用layui来构建一个美观的网站或应用,您可能需要使用一些自定义CSS来修改layui内部组件的样式。然而,修改layui组件的样式可能会对整个页面产生影响,甚至可能破…

    编程 2025-04-29
  • Python分两行输出,在第一行中输出为什么

    Python是一种非常有趣和强大的编程语言,具有广泛的应用。而Python分两行输出的方法可能在学习Python编程时会接触到,这种方法能够帮助程序员更好地理解Python的输出机…

    编程 2025-04-28
  • CSS sans字体家族

    CSS sans字体家族是一组基于CSS的无衬线字体,具有在不同设备和浏览器上保持一致的特性。本文将从优势、使用、自定义等多个方面对CSS sans字体家族进行详细介绍。 一、优势…

    编程 2025-04-28
  • JFXtras样式——美化JavaFX应用的必备神器

    本文将从多个方面对JFXtras样式进行详细的阐述,教你如何使用JFXtras样式来美化你的JavaFX应用。无需任何前置知识,让我们一步步来了解。 一、简介 JFXtras是一个…

    编程 2025-04-27
  • 如何用Python输出两行中文字符

    在此篇文章中,我们将探讨如何使用Python输出两行中文字符。具体而言,我们将从以下几个方面进行阐述: 一、Python中文输出的基础知识 在开始探讨如何输出中文字符之前,我们需要…

    编程 2025-04-27
  • SVG与CSS

    一、SVG与CSS的介绍 SVG(可缩放矢量图形)是用于描述二维矢量图形的XML标记语言。其可以通过文本编辑器进行编辑,也可以通过JavaScript动态操作SVG元素。与常规图像…

    编程 2025-04-25
  • CSS教程:从入门到精通

    一、CSS是什么 CSS(Cascading Style Sheets)是一种用于定义网页样式的语言。由于网页内容和样式是分开保存的,因此CSS可以使设计者和开发者分离出样式与内容…

    编程 2025-04-25
  • 如何优雅地改变鼠标指针样式

    我们在网页设计中,经常会遇到需要改变鼠标指针样式的情况,比如当我们将鼠标移动到一个链接上时,我们希望鼠标指针变成手型,这时我们就需要用到改变鼠标指针样式的技巧。本文将从多个方面详细…

    编程 2025-04-25
  • CSS 事件穿透

    在 Web 开发中,CSS 负责网页的样式,而 JavaScript 负责网页的行为。虽然两者有不同的职责,但在实际的开发过程中,我们经常会遇到将二者结合起来的场景。比如需要通过 …

    编程 2025-04-25
  • CSS投影的全面解析

    一、投影简介 CSS投影是指在HTML元素周围创建出一种类似于投影的效果,从而增强元素的立体感和深度感。投影可以帮助设计师和开发人员在设计页面时提升视觉效果,提高页面的可读性和易用…

    编程 2025-04-24

发表回复

登录后才能评论