当前位置: 首页 > news >正文

css文本溢出省略号多行单行例子详细

在 CSS 中,可以使用 text-overflow: ellipsis; 属性来实现文本溢出时自动省略号的效果。但是该属性只能用于单行文本溢出的情况,对于多行文本溢出的情况,需要使用一定的技巧才能实现相应的效果。下面将分别介绍单行和多行文本溢出时的实现方法。

单行文本溢出省略号

HTML 代码:

<p class="single-line-ellipsis">这是一个超长的单行文本,用于测试省略号效果。
</p>

CSS 代码:

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

解释:

  1. overflow: hidden; 表示超出部分不可见。
  2. text-overflow: ellipsis; 表示文本溢出时显示省略号。
  3. white-space: nowrap; 表示文本不换行,这样才能实现完整的溢出效果。

多行文本溢出省略号

实现多行文本省略号的方法有很多种,这里介绍其中一种方法。该方法需要使用 -webkit-line-clamp 属性(该属性只对 WebKit 浏览器有效)和 -webkit-box-orient 属性。

HTML 代码:

<p class="multi-line-ellipsis">这是一个超长的多行文本,用于测试省略号效果。这是一个超长的多行文本,用于测试省略号效果。这是一个超长的多行文本,用于测试省略号效果。
</p>

CSS 代码:

.multi-line-ellipsis {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;
}

解释:

  1. display: -webkit-box; 表示将文本框设置为弹性盒子,可以参考 flexbox 的相关知识。
  2. -webkit-box-orient: vertical; 表示弹性盒子的排列方向为垂直方向。
  3. -webkit-line-clamp: 3; 表示最多显示 3 行,超出部分会被省略号代替。
  4. overflow: hidden; 表示超出部分不可见。
  5. text-overflow: ellipsis; 表示文本溢出时显示省略号。

注意事项:

  1. -webkit-line-clamp 属性只对 WebKit 浏览器有效,对其他浏览器没有作用。
  2. 弹性盒子的相关知识可以参考 flexbox。

相关文章:

css文本溢出省略号多行单行例子详细

在 CSS 中&#xff0c;可以使用 text-overflow: ellipsis; 属性来实现文本溢出时自动省略号的效果。但是该属性只能用于单行文本溢出的情况&#xff0c;对于多行文本溢出的情况&#xff0c;需要使用一定的技巧才能实现相应的效果。下面将分别介绍单行和多行文本溢出时的实现方法…...

android auto

测试面向汽车的 Android 应用 | Android 开发者 | Android Developers (google.cn)...

opengl基础笔记1

1、opengl运行模式及opengl规范 运行模式&#xff1a;核心模式与立即渲染模式&#xff08;弃用&#xff09; 由于OpenGL的大多数实现都是由显卡厂商编写的&#xff0c;当产生一个bug时通常可以通过升级显卡驱动来解决。这些驱动会包括你的显卡能支持的最新版本的OpenGL&#xf…...

Flutter中的各种刷新小部件

1.FutureBuilder 用于处理异步操作和构建界面的非常有用的小部件。它通常与 Future 对象一起使用&#xff0c;用于在异步操作完成后构建界面。 import package:flutter/material.dart;void main() > runApp(MyApp());class MyApp extends StatelessWidget {overrideWidget…...

DataxWeb安装部署及使用--真香警告

DataxWeb安装部署及使用–真香警告 文章目录 1.Datax简介1.1 Datax是什么&#xff1f;1.2 Datax的架构1.3 设计理念1.4 DataX3.0框架设计1.5 DataX3.0插件体系1.6 DataX3.0核心架构1.6.1 核心模块介绍1.6.2 DataX调度流程 2.DataxWeb简介2.1 DataxWeb是什么&#xff1f;2.2 Dat…...

OpenCV 笔记(4):图像的算术运算、逻辑运算

Part11. 图像的算术运算 图像的本质是一个矩阵&#xff0c;所以可以对它进行一些常见的算术运算&#xff0c;例如加、减、乘、除、平方根、对数、绝对值等等。除此之外&#xff0c;还可以对图像进行逻辑运算和几何变换。 我们先从简单的图像加、减、逻辑运算开始介绍。后续会有…...

创建ABAP数据库表和ABAP字典对象-使用已存在的数据元素增加城市字段04

基于内置域增加一个字段 1.在编辑器中&#xff0c;输入字段的名称&#xff0c;后跟冒号:city:。暂时忽略这个错误。2. 输入/MOC/C并使用自动补全(**Ctrl空格**)&#xff0c;输入类型。3. 然后添加一个分号:city: /moc/city;4.在SAP GUI中查看&#xff0c;字段已经新增...

Centos7上安装 Node.js

文章目录 一、前言二、步骤三、涉及nodejs&#xff0c;centos还是少用吧 一、前言 centos7安装nodejs如果直接安装较高版本会包错误&#xff0c;无法运行npm node: /lib64/libm.so.6: version GLIBC_2.27‘ not found (required by node)二、步骤 网上说的下载升级编译器的方…...

栈及其栈的模拟实现和使用

1. 栈(Stack) 1.1 概念 栈 &#xff1a;一种特殊的线性表&#xff0c;其 只允许在固定的一端进行插入和删除元素操作 。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO &#xff08; Last In First Out &#xff09;的原则…...

HarmonyOS开发:开源一个刷新加载组件

前言 系统Api中提供了下拉刷新组件Refresh&#xff0c;使用起来也是非常的好用&#xff0c;但是风格和日常的开发&#xff0c;有着巨大的出入&#xff0c;效果如下&#xff1a; 显然上面的效果是很难满足我们实际的需求的&#xff0c;奈何也没有提供的属性可以更改&#xff0c;…...

XSSFWorkbook读取模板,批量填充并导出文件

1、pom文件导入 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.1.0</version> </dependency> <dependency><groupId>org.apache.poi</groupId><artifactId>…...

Lazada新店运营秘籍自养号测评技术

跨境行业的前途虽然大好&#xff0c;但要想真正从中分一杯羹并非易事。东南亚市场前景大好&#xff0c;而作为其主流在线购物网站之一&#xff0c;Lazada吸引了众多卖家和买家。作为新手来说&#xff0c;注册好Lazada之后&#xff0c;店铺下一步该怎么做呢&#xff1f;赶紧来看…...

python:逐像素处理遥感数据时间序列数据(求时间序列最大值、最大值所对应的索引、最大值所在的时间)

作者:CSDN @ _养乐多_ 本文记录了使用gdal、ras、numpy 库实现遥感时间序列数据逐像素处理的代码。并以求NADVI时间序列最大值为例。代码可扩展到其他多种对时间序列的处理,比如MK趋势分析,求时间序列中值、众数、标准差、和,时间序列拟合、异常检测、机器学习预测等多种应…...

SpringCloudGateway--过滤器(自定义filter)

目录 一、概览 二、通过GatewayFilter实现 三、继承AbstractGatewayFilterFactory 一、概览 当使用Spring Cloud Gateway构建API网关时&#xff0c;可以利用Spring Cloud Gateway提供的内置过滤器&#xff08;filter&#xff09;来实现对请求的处理和响应的处理。过滤器可以…...

【docker】安装 showdoc

1. 下载镜像 2.新建存放showdoc数据的目录 3.启动showdoc容器 4.打开网页 1. 下载镜像 # 原版官方镜像安装命令(中国大陆用户不建议直接使用原版镜像&#xff0c;可以用后面的加速镜像) docker pull star7th/showdoc # 中国大陆镜像安装命令&#xff08;安装后记得执行docke…...

智慧公厕:科技赋予公共卫生新生命,提升城市管理品质

在现代化城市中&#xff0c;公共卫生设施的发展与提升一直是对城市管理者和市民的共同期望。然而&#xff0c;传统的公共厕所常常令人困扰&#xff0c;脏乱臭成为难题。为了解决这一难题&#xff0c;广州中期科技科技有限公司全新升级的智慧公厕整体解决方案&#xff0c;补誉为…...

深度学习_2 数据操作之数据预处理

数据操作 机器学习包括的核心组件有&#xff1a; 可以用来学习的数据&#xff08;data&#xff09;&#xff1b;如何转换数据的模型&#xff08;model&#xff09;&#xff1b;一个目标函数&#xff08;objective function&#xff09;&#xff0c;用来量化模型的有效性&…...

在美团和阿里6年,很难却也真实...

先简单的说下&#xff0c;本人6年工作经验&#xff0c;曾就职于某大型国企&#xff0c;公司研究院成员&#xff0c;也就职过美团担任高级测试开发工程师&#xff0c;有丰富的高并发大型项目经验。 后端高并发、高性能、高可用性开发&#xff0c;自动化测试框架开发以及软件自动…...

2、NLP文本预处理技术:词干提取和词形还原

一、说明 在上一篇文章中&#xff0c;我们解释了文本预处理的重要性&#xff0c;并解释了一些文本预处理技术。在本文中&#xff0c;我们将介绍词干提取和词形还原主题。 词干提取和词形还原是两种文本预处理技术&#xff0c;用于将单词还原为其基本形式或词根形式。这些技术的…...

Fabric官方示例测试网络搭建

目录 一、参考文档二、环境依赖三、Fabric源码安装3.1、创建链目录3.2、下载源码3.3、修改安装脚本3.4、开始安装3.4.1、执行安装脚本3.4.2、手动下载ca和二进制配置包 四、启动测试网络五、使用测试网络5.1、创建应用通道5.2、部署链码5.3、发送交易 六、关闭测试网络 一、参考…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...