CSS文本超出显示小数点
目录
1、单行文本溢出
2、多行文本溢出
1、基于高度截断
2、基于行数截断
1、单行文本溢出
如果解决文本溢出显示省略号,需要满足的三个条件:
-
先强制一行内显示文本
white-space:nowrap;/*默认normal 自动换行*/ -
超出的文本隐藏起来。
overflow:hidden; -
文本省略部分替代超出的部分
text-overflow:ellipsis; /*默认是clip 超出部分直接切除*/
2、多行文本溢出
1、基于高度截断
对于多行文本的溢出显示省略号,可以使用display属性配合-webkit-line-clamp和-webkit-box-orient来实现。
步骤如下:
-
首先,将需要显示省略号的元素设置为块级元素,并且固定高度。
-
接着,使用
-webkit-box-orient属性将元素内部的子元素按照垂直方向排列。 -
然后,使用
-webkit-line-clamp属性限制元素内部的文本行数。 -
最后,使用
text-overflow属性将超出元素高度的文本内容显示为省略号代码展示
.ellipsis {/*将元素内部的子元素按照垂直方向排列*/display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;height: 60px;/*设置盒子高度*/max-height: 60px; /* 或者根据需要设置最大高度 */-webkit-line-clamp: 3;限制元素内部的文本行数。text-overflow: ellipsis;将超出元素高度的文本内容显示为省略号}
2、基于行数截断
步骤
-webkit-line-clamp: 2:用来限制在一个块元素显示的文本的行数,为了实现该效果,它需要组合其他的WebKit属性)
display: -webkit-box:和1结合使用,将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical:和1结合使用 ,设置或检索伸缩盒对象的子元素的排列方式
overflow: hidden:文本溢出限定的宽度就隐藏内容
text-overflow: ellipsis:多行文本的情况下,用省略号“…”隐藏溢出范围的文本
代码展示
<style>
p {width: 400px;border-radius: 1px solid red;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;
}
</style>
<p>这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p >
相关文章:
CSS文本超出显示小数点
目录 1、单行文本溢出 2、多行文本溢出 1、基于高度截断 2、基于行数截断 1、单行文本溢出 如果解决文本溢出显示省略号,需要满足的三个条件: 先强制一行内显示文本 white-space:nowrap;/*默认normal 自动换行*/ 超出的文本隐藏起来。 overflow:…...
怎么把图片压缩小一点?4个简单的压缩办法
怎么把图片压缩小一点?因为图片太大而带来的不良影响可说是非常的多,例如因为图片体积太大导致电脑中的存储空间越来越小,使得电脑使用起来越来越慢;当我们打开一张体积非常大的图片时无法开,甚至一度让电脑卡死&#…...
react嵌套路由
react嵌套页面 先从路由身上导出 import { HashRouter, Routes, Route, Navigate } from react-router-dom; //引入页面; import Home from ./view/Home; import About from ./view/About; import Integrated from ./view/Integrated; import Sidebar from ./vie…...
代码随想录 单调栈 Ⅰ
739. 每日温度 给定一个整数数组 temperatures ,表示每天的温度,返回一个数组 answer ,其中 answer[i] 是指对于第 i 天,下一个更高温度出现在几天后。如果气温在这之后都不会升高,请在该位置用 0 来代替 思路&#…...
C++返回引用
在本文中,您将学习如何在函数中通过引用返回值,以及如何在程序中有效地使用它。 在C 编程中,不仅可以通过引用将值传递给函数,还可以通过引用返回值。 示例:通过引用返回 #include <iostream> int c; int add…...
010:连续跌3天,同时这三天收盘价都在20日均线下,第四天上涨的概率--以京泉华为例
对于《连续跌三天,压第四天上涨的盈利计算》,我们可以继续优化这个策略,增加条件:同时三天都收盘在20日均线下。 因为我们上一篇《获取20日均线数据到excel表中》获得了20日均线数据,我们可以利用均线数据来编写新的脚…...
MATLAB与Python:优势与挑战
本文旨在探讨MATLAB与Python在特定领域内的使用情况,并分析两者之间的优势和挑战。 MATLAB和Python都是流行的编程语言,广泛应用于科学计算、数据分析和机器学习等领域。在某些领域,如航空航天工程、自动化和电子工程嵌入式系统开发等&#…...
CSP-J第二轮试题-2019年-1、2题
文章目录 参考:总结 [CSP-J2019] 数字游戏题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 提示答案答案2 [CSP-J 2019] 公交换乘题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 提示…...
深入理解 python 虚拟机:原来虚拟机是这么实现闭包的
深入理解 python 虚拟机:原来虚拟机是这么实现闭包的 在本篇文章当中主要从虚拟机层面讨论函数闭包是如何实现的,当能够从设计者的层面去理解闭包就再也不用死记硬背一些闭包的概念了,因为如果你理解闭包的设计原理之后,这些都是…...
【数据结构-哈希表 一】【原地哈希】:缺失的第一个正整数
废话不多说,喊一句号子鼓励自己:程序员永不失业,程序员走向架构!本篇Blog的主题是【原地哈希】,使用【数组】这个基本的数据结构来实现,这个高频题的站点是:CodeTop,筛选条件为&…...
【C++设计模式之迭代器模式】分析及示例
简介 迭代器模式是一种行为型设计模式,它提供了一种顺序访问聚合对象元素的方法,而又不需要暴露聚合对象的内部结构。迭代器模式通过将遍历算法封装在迭代器对象中,可以使得遍历过程更简洁、灵活,并且符合开闭原则。 描述 迭代…...
【代码随想录】LC 27. 移除元素
文章目录 前言一、题目1、原题链接2、题目描述 二、解题报告1、思路分析2、时间复杂度3、代码详解 三、知识风暴 前言 本专栏文章为《代码随想录》书籍的刷题题解以及读书笔记,如有侵权,立即删除。 一、题目 1、原题链接 27. 移除元素 2、题目描述 二、…...
crash工具分析dma设备内存踩踏(一)
背景介绍 我们的客户在利用我们提供的SDK参考方案开发相关产品时,在产品方案上进行一些基础老化测试时,极低概率出现kernel随机panic问题,由于场景复杂,无法单独针对特定模块或功能进行拆解来进行实验排查,只能基于已…...
C#上位机——根据命令发送
C#上位机——根据命令发送 第一步:设置窗口的布局 第二步:设置各个属性 第三步:编写各个模块之间的关系...
BEVFormer代码跑通
1 环境配置 1.1 环境安装 # 1 拉取源码 github加速代理https://ghproxy.com/ git clone https://github.com/fundamentalvision/BEVFormer.git# 2 创建虚拟环境 conda create -n bev python3.8 -y# 3 激活虚拟环境 conda activate bev# 4.1 安装torch,torchvision,torchaud…...
kafka安装
kafka安装 1 kafka概念 1.1 kafka介绍 kafka是最初有Linkedin公司开发的,是一个分布式,分区,多副本,多生产者,多订阅者,基于zookeeper协调的分布式日志系统。具有高吞吐量,可扩展性和可容错性…...
Mac上安装Java的JDK多版本管理软件jEnv
JDK的多版本管理软件主要有以下三种: jEnv jEnv 是一个命令行工具,可以帮助您管理和切换不同版本的 Java 环境。它可以让您在不同的项目之间轻松切换 Java 版本。您可以使用 jenv global 命令设置全局 Java 版本,也可以使用 jenv local 命令…...
linux常见命令以及jdk,tomcat环境搭建
目录 Is pwd cd touch cat echo vim 复制粘贴 mkdir rm cp jdk部署 1. yum list | grep jdk进行查找编辑 2.安装编辑 3.再次确认 4.判断是否安装成功 tomcat安装 1.下载压缩包,把压缩包上传至linux(可能需要yum install lrzsz) 2.解压缩unzip 压缩包名&…...
将表情存入数据库
概念: 表情是一种比较特殊的字符串,为unicode编码,unicode编码要存入数据库一般情况下,是存不了的,有两种解决方式,一种将数据表编码方式改为unicode编码方式,但是这种情况适用于功能刚开始设计…...
H桥级联型五电平三相逆变器Simulink仿真模型
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述:海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而,目前该领域仍面临一个挑战,即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...
FFmpeg:Windows系统小白安装及其使用
一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】,注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录(即exe所在文件夹)加入系统变量…...
MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用
文章目录 一、背景知识:什么是 B-Tree 和 BTree? B-Tree(平衡多路查找树) BTree(B-Tree 的变种) 二、结构对比:一张图看懂 三、为什么 MySQL InnoDB 选择 BTree? 1. 范围查询更快 2…...
前端中slice和splic的区别
1. slice slice 用于从数组中提取一部分元素,返回一个新的数组。 特点: 不修改原数组:slice 不会改变原数组,而是返回一个新的数组。提取数组的部分:slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...
水泥厂自动化升级利器:Devicenet转Modbus rtu协议转换网关
在水泥厂的生产流程中,工业自动化网关起着至关重要的作用,尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关,为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多,其中不少设备采用Devicenet协议。Devicen…...
Canal环境搭建并实现和ES数据同步
作者:田超凡 日期:2025年6月7日 Canal安装,启动端口11111、8082: 安装canal-deployer服务端: https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...
