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

css-设置单行文本溢出省略号,使用overflow:hidden属性之后的出现的问题几解决办法。

1 设置单行文本溢出后出现省略号

必要:需要设置固定宽度,不允许换行

width: 200px;
white-space: nowrap;  
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

2 设置N行文本溢出后出现省略号

width: 200px;
white-space: nowrap;  
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: N; /* 需要几行省略设置几行*/
-webkit-box-orient: vertical;

以上就是设置文本溢出省略号显示了。下面是遇到的问题

问题:

在测试中发现当浏览器分辨率调高的话,会出现下方文字被遮挡的bug。125%以上都会出现这个问题。

分辨率影响可真的是不好搞啊,因为很多时候无法定位到具体问题。

我先是将外层的父元素高度调高,发现并未解决

又将line-height: 属性值调低  发现125%可以显示  但是字体就不能垂直居中了。而且调到200%还是会有这个问题。

于是我又将padding-bottom设置为5px。  发现还是行不通 , 但是我发现padding-bottom调大的时候元素并未发生变化。于是我将元素设置为固定高度,因为此处是单行文本

使用 height 属性设置元素的高度,而不是直接使用 line-height,这样可以防止对下方的元素产生影响。

.content {height: 40px;line-height: 40px;overflow: hidden;display: flex;font-size: 14px;p {height: 40px; // 此处为后来加的  加上之后就可以解决width: 150px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center;}}

当我把浏览器缩放调整到150%的时候 也是可以显示完整的

相关文章:

css-设置单行文本溢出省略号,使用overflow:hidden属性之后的出现的问题几解决办法。

1 设置单行文本溢出后出现省略号 必要:需要设置固定宽度,不允许换行 width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; 2 设置N行文本…...

js的方法

字符串方法: substring(startIndex, endIndex):从指定的字符串中提取字符并返回新字符串,不包括结束位置的字符。substr(startIndex, length):从指定字符串中提取指定长度的字符并返回新字符串。indexOf(searchValue, startIndex…...

[NSSRound#11] 密码学个人赛

这个比赛没有参加,跟别人要了些数据跑一下,其实交互这东西基本上一样,跑通就行. ez_enc 这题有点骗人,给了一堆AB串,一开始以为是培根密码,结果出来很乱.再看长度:192 应该就是01替换 a ABAABBBAABABAABBABABAABBABAAAABBABABABAAABAAABBAABBBBABBABBABBABABABAABBAABBABAA…...

玩转树莓派四、修改国内源提高更新速度

树莓派的软件包源默认连接的是官方源,速度不是很快,我们可以更换为第三方源以提高下载速度和体验。 首先通过命令 lsb_release -a 获取到版本号为 bullseye piRpi4B2G:/etc/apt $ lsb_release -a No LSB modules are available. Distributor ID: Debian Descripti…...

苹果手机网速慢怎么办?这些方法帮你解决网速慢的问题!

案例:苹果手机数据网络信号差,怎么解决? 【家人们,苹果手机不知咋回事,网速很慢,想要在某宝买个东西都得卡个半天。哭了!有没有什么方法解决?】 苹果手机作为一款高端智能手机&…...

linux_时序竞态-pause函数-sigsuspend函数-异步I/O-可重入函数-不可重入函数

接上一篇:linux_信号捕捉-signal函数-sigaction函数-sigaction结构体 今天来分享时序竞态的知识,关于时序竞态的问题,肯定会和cpu有关,也会学习两个函数,pause函数,sigsuspend函数, 也会分享什么…...

Tomcat的负载均衡和动静分离

---------------------NginxTomcat负载均衡、动静分离------------------------- Nginx 服务器:192.168.80.10:80 Tomcat服务器1:192.168.80.100:80 Tomcat服务器2:192.168.80.101:8080 192.168.80.101:8081 1.部署Nginx 负载均衡器 system…...

C++每日一练:最长递增区间 阿波罗的魔力宝石 投篮

文章目录 前言一、最长递增区间二、阿波罗的魔力宝石三、投篮总结 前言 今天的题太简单,甚至 “最长递增区间” 和 “投篮” 就是一个问题。实在没事干,也给做了!直接上代码算了… 提示:以下是本篇文章正文内容 一、最长递增区间…...

HCIP之VLAN

目录 网络的三层架构 接入层 无线的缺陷: 上网用户数量增多,网络卡顿的原因 CSMA/CD --- 载波侦听多路访问/冲突检测 CSMA/CA --- 载波侦听多路访问/冲突避免 无线网络没有使用冲突检测技术的原因 汇聚层 连接两条线路的原因 核心层 VLAN VLAN配…...

1686_MATLAB处理Excel文件

全部学习汇总: GreyZhang/g_matlab: MATLAB once used to be my daily tool. After many years when I go back and read my old learning notes I felt maybe I still need it in the future. So, start this repo to keep some of my old learning notes servral …...

亿发软件:中大型仓库进出货管理系统解决方案,定制软件让仓储作业高效便捷

中大型仓库出入库管理是传统厂家供应链管理流程的重要部分,直接关乎货物在仓库当中存储的安全,和员工工作的效率。一旦仓库管理当中出现了疏漏,那么货物的信息数据就会发生变动,导致实际与账目不符。人工带来的低效与不可控是传统…...

SQL Server基础 第二章 表结构管理

目录 一、数据类型 1,字符类数据类型 2,数值型数据类型 3,日期/时间型数据类型 二、主键(Primary key) 三、默认值 四、唯一键(Unique) 五、自增标识 六、约束 七、外键 一、数据类型 …...

华为OD机试真题(Java),最小步骤数(100%通过+复盘思路)

一、题目描述 一个正整数数组 设为nums&#xff0c;最大为100个成员&#xff0c;求从第一个成员开始正好走到数组最后一个成员所使用的最小步骤数。 要求&#xff1a; 第一步 必须从第一元素起 且 1<第一步步长<len/2 (len为数组长度)&#xff1b;从第二步开始只能以所…...

3分钟搞懂:JavaScript 和 ECMAScript

JavaScript 和 ECMAScript ECMAScript 是 JavaScript 语言的国际标准&#xff0c;JavaScript 是 ECMAScript 的一种实现&#xff08;Adobe ActionScript 和 JScript 同样实现了 ECMAScript&#xff09;。 ECMAScript 是欧洲计算机制造商协会 ECMA&#xff08;European Comput…...

Bito:一款 iead/webstorm 神级插件,由 ChatGPT 团队开发,堪称辅助神器

前言&#xff1a; idea(后端)&#xff0c;webstorm(前端)中可以用的一款辅助插件&#xff1a;Bito 个人尝试体验效果&#xff1a; 优点是&#xff1a;可以自动完成一些场景代码。 缺点&#xff1a;太慢了&#xff0c;大部分时间一直转圈 摘取文档&#xff1a; 什么是Bito&…...

[ 云原生 | Docker ] 构建高可用性的 SQL Server:Docker 容器下的主从同步实现指南

文章目录 一、前言二、SQL Server 主从同步的原理介绍三、具体的搭建过程3.1 准备工作3.1.1 卸载旧版本&#xff08;如果有&#xff0c;可选&#xff0c;非必须&#xff09;3.1.2 安装 Docker3.1.3 验证本地 Docker 是否安装成功 3.2 创建 Docker 网络3.3 创建主从节点的 SQL S…...

Binary Utilities非默认目录构建和安装

在AppArmor零知识学习六、源码构建&#xff08;3&#xff09;中&#xff0c;详细介绍了libapparmor的构建步骤&#xff0c;但那完全使用的是官网给出的默认参数。如果需要将目标文件生成到指定目录而非默认的/usr&#xff0c;则需要进行一些修改&#xff0c;本文就来详述如何进…...

【故障检测】基于 KPCA 的故障检测【T2 和 Q 统计指数的可视化】(Matlab代码实现)

&#x1f4a5; &#x1f4a5; &#x1f49e; &#x1f49e; 欢迎来到本博客 ❤️ ❤️ &#x1f4a5; &#x1f4a5; &#x1f3c6; 博主优势&#xff1a; &#x1f31e; &#x1f31e; &#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 …...

从“捐赠openEuler”到“向openEuler捐赠”,openEuler生态走入高速发展期

【中国&#xff0c;上海&#xff0c;2023年4月21日】openEuler Developer Day 2023于4月20-21日在线上和线下同步举办。本次大会由开放原子开源基金会指导&#xff0c;中国软件行业协会、openEuler社区、边缘计算产业联盟共同主办&#xff0c;以“万涓汇流&#xff0c;奔涌向前…...

ambari的kafka服务开启sasl

添加 sasl 配置⽂件 集群部署 Kafka2.2下载地址 http://archive.apache.org/dist/kafka/2.2.1/kafka_2.11-2.2.1.tgz 解压安装包 tar -zxvf kafka_2.11-2.2.1.tgz 部署略 ambari 数据kafka服务 在kafka的conf目录下创建sasl_conf目录,将kafka_client_jaas.conf/kafka_se…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...