css 文本超过一行省略号显示、文本超过两行省略号显示

要使CSS文本在一行内显示,并在超过一行时显示省略号(...),可以使用以下CSS样式:

.text-ellipsis {white-space: nowrap;      /* 文本不换行 */overflow: hidden;         /* 隐藏超出容器的内容 */text-overflow: ellipsis;  /* 使用省略号表示被截断的文本 */
}

将这个样式应用到需要限制为一行的元素上,例如:

<div class="text-ellipsis">这是一段很长的文本,但我们希望它只显示一行,超过的部分用省略号表示。
</div>

要使CSS文本最多显示两行,并在超过两行时显示省略号(...),可以使用以下CSS样式:

.text-ellipsis-2 {display: -webkit-box;      /* 使用Webkit的盒子模型 */-webkit-line-clamp: 2;     /* 限制最多显示2行 */-webkit-box-orient: vertical; /* 设置盒子内容的排列方向为垂直 */overflow: hidden;         /* 隐藏超出容器的内容 */text-overflow: ellipsis;  /* 使用省略号表示被截断的文本 */
}

-webkit-line-clamp是控制显示的行数,比如您想显示3行,改为3即可。

请注意,文本最多显示两行的这种处理方法目前仅在支持Webkit盒子模型的浏览器中有效,例如Chrome和Safari。对于其他浏览器如果不生效,您可能需要使用其他方法,例如使用JavaScript来实现类似的功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/841433.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习中图像增强类别和作用

1. 基本几何变换 旋转 (Rotation)&#xff1a;随机旋转图像一定角度。 作用&#xff1a;使模型对物体方向的变化更具鲁棒性。平移 (Translation)&#xff1a;沿水平方向或垂直方向平移图像。 作用&#xff1a;增强模型对位置变化的鲁棒性。翻转 (Flip)&#xff1a;水平或垂直翻…

C语言基础(七)

C语言基础&#xff08;七&#xff09; constconst修饰变量const修饰指针 main函数传参GDB调试工具 const const修饰变量 const修饰变量&#xff1a;只读&#xff08;不可写&#xff09; const修饰指针 左数右指&#xff08;const在*的哪一侧&#xff09; 数 —— 数值不可修…

【前端每日基础】day21——js基础运算符

JavaScript 提供了丰富的运算符&#xff0c;用于执行各种操作&#xff0c;如算术运算、比较、逻辑运算等。以下是 JavaScript 中的主要运算符及其用法。其实运算符大体上各语言都大差不差&#xff0c;顶多是部分小细节会有不同&#xff0c;简单看看就好了。 算术运算符 加法 …

halcon C++ 图片中添加区域HRegion,循环读取HTuple

halcon C 图片中添加区域&#xff0c;循环读取HTuple HObject ho_ImageResult1; GenEmptyObj(&ho_ImageResult1); // 绘制区域到图片 PaintRegion(ho_Regions, ho_Image, &ho_ImageResult1, ((HTuple(255).Append(255)).Append(255)), "fill"); // 保存图片…

弱密码系统登录之后强制修改密码

在你登录的时候&#xff0c;获取到弱密码&#xff0c;然后将他存到vuex里面&#xff0c;在登录进去之后&#xff0c;index页面再去取&#xff0c;思路是这样的 一、vuex里面定义密码字段 我是直接在user.js里面写的 import { login, logout, getInfo } from /api/login impo…

【MySQL进阶之路 | 基础篇】存储过程

1. 存储过程概述 (1). 含义 : 存储过程就是一组经过预先编译的SQL语句的封装. (2). 执行过程 : 存储过程预先存储在MySQL服务器上&#xff0c;需要执行的时候&#xff0c;客户端只需要向服务器端发送调用存储过程的命令&#xff0c;服务器端就可以把预先存储好的这一系列SQL语…

推荐一款媒体影音嗅探神器—Chrome扩展插件(猫抓cat-catch)

目录 1.1、前言1.2、下载地址1.3、github Releases 版本说明1.4、安装步骤1.5、猫抓插件常规设置1.5.1、设置抓取文件的类型1.5.2、设置抓取文件的后缀名 1.1、前言 我们在日常上网的过程中&#xff0c;很多音频、视频网站下载资源都非常不方便&#xff0c;要么需要安装客户端&…

jvm的类加载

文章目录 概要加载类加载器分类双亲委派模型自定义加载器 验证准备解析初始化<cinit>与<init> 概要 jvm运行时的整体结构如下 一个Car类&#xff0c;类跟Car对象的转换过程如下&#xff1a; 加载后的class类信息存放于方法区&#xff1b;ClassLoader只负责clas…

5.25机器人基础-空间描述和变换1

参考资料&#xff1a;《机器人学导论》John.J.Craig 彻底搞懂“旋转矩阵/欧拉角/四元数”&#xff0c;让你体会三维旋转之美_欧拉角判断动作-CSDN博客 机器人操作的定义是指通过某种机构使零件和工具在空间运动。因此&#xff0c;对于坐标系的定义显得尤为重要&#xff0c;相…

Mysql搭建主从同步,docker方式(一主一从)

服务器&#xff1a;两台Centos9 用Docker搭建主从 使用Docker拉取MySQL镜像 确保两台服务器都安装好了docker 安装docker请查看&#xff1a;Centos安装docker 1.两台服务器都先拉取mysql镜像 docker pull mysql 2.我这里是在 /opt/docker/mysql 下创建mysql的文件夹用来存…

基于STM32实现智能水族箱控制系统

目录 引言环境准备智能水族箱控制系统基础代码示例&#xff1a;实现智能水族箱控制系统 水温传感器数据读取水泵与加热器控制水位传感器数据读取用户界面与显示应用场景&#xff1a;水族箱管理与环境控制问题解决方案与优化收尾与总结 1. 引言 本教程将详细介绍如何在STM32嵌…

网络布线与数制转换

信号与传输介质 信号概述 什么是信号 信息 人对现实世界事物存在方式或运动状态的某种认识 数据 用于描述事物的某些属性的具体量值 信号 信息传递的媒介 例如&#xff0c;描述某一件物体&#xff0c;它的长、宽、高、质地、颜色、气味等就是用以形容该物体的数据。通…

深度学习——自己的训练集——图像分类(CNN)

图像分类 1.导入必要的库2.指定图像和标签文件夹路径3.获取文件夹内的所有图像文件名4.获取classes.txt文件中的所有标签5.初始化一个字典来存储图片名和对应的标签6.遍历每个图片名的.txt文件7.随机选择一张图片进行展示8.构建图像的完整路径9.加载图像10.检查图像是否为空 随…

网络安全从入门到精通(特别篇I):应急响应之不同平台后门排查思路

Windows-后门-常规&权限维持&内存马 Linux-后门-常规&权限维持&Rootkit&内存马 Windows实验 1、常规MSF后门-分析检测 2、权限维持后门-分析检测 3、Web程序内存马-分析检测 常见工具集合: https://mp.weixin.qq.com/s/L3Lv06bFdUX_ZE4rS69aDg 常规…

RAG系统-主流向量数据库

主流向量数据库功能对比 FAISS: Meta 开源的向量检索引擎 https://github.com/facebookresearch/faissPinecone: 商用向量数据库&#xff0c;只有云服务 https://www.pinecone.io/Milvus: 开源向量数据库&#xff0c;同时有云服务 https://milvus.io/Weaviate: 开源向量数据库&…

小程序迁移主体变更流程全攻略

小程序迁移变更主体有什么作用&#xff1f;有些小程序开发者&#xff0c;因为业务调整&#xff0c;或者公司更换&#xff0c;需要更换小程序主体&#xff01;但是很多开发者对于小程序更换主体的操作流程并不熟悉&#xff0c;于是我们专门准备了这篇&#xff0c;关于小程序更换…

可以在搜索结果中屏蔽指定网站的插件

可以在搜索结果中屏蔽指定网站的插件 | LogDict背景 在搜索引擎中搜索问题, 往往充斥各种无效内容 比如搜个技术类的问题, 前几页CSDN, 百度百家号, 百度经验, 百度知道, 腾讯云各类云爬的水文 CSDN基本都是复制粘贴的, 甚至格式都乱码了, 虽然我以前也干过 要复制粘贴无所谓, …

机器重启oracle数据库自动启动异常

业务连接报ora-01033&#xff1a; 检查服务器&#xff0c;发现有重启记录&#xff0c;oracle进程存在&#xff0c;数据库状态处于mount状态&#xff0c;检查日志&#xff0c;发现在数据库启动时没有正常open&#xff1a; 连入数据库&#xff1a;Select * from v$backup 发现数…

xml获取数据

获取xml文本 加载xml文本 解析xml文本&#xff1a; &#xff08;1&#xff09;获取根节点的所有字节点的list &#xff08;2&#xff09;将每个节点转换为xmlelement &#xff08;3&#xff09;从xmlelement中获取各种名称的数据 //获取xml文件TextAsset xml Resources.L…

初步认识栈和队列

Hello&#xff0c;everyone&#xff0c;今天小编讲解栈和队列的知识&#xff01;&#xff01;&#xff01; 1.栈 1.1栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。 进行数据插入和删除操作的一端 称为栈顶&…