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

实现单行/多行文本溢出

news 文章来源：https://blog.csdn.net/m0_66706006/article/details/133468271 2025/1/11 11:52:11

在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号。

一. 单行文本溢出

即文本在一行内显示，超出部分以省略号的形式展现

1. 涉及的CSS属性

overflow: hidden

white-space: nowrap

text-overflow: clip/ellipsis clip当对象内文本溢出部分裁切掉，ellipsis当对象内文本溢出时显示省略标记(...)

二. 多行文本溢出

1. 基于高度截断

伪元素＋定位

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.demo {position: relative;line-height: 20px;height: 40px;overflow: hidden;}.demo::after {content: "...";position: absolute;bottom: 0;right: 0;padding: 0 20px 0 10px;}</style></head><body><div class="demo">这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本</div></body>
</html>

2. 基于行数截断

-webkit-line-clamp: 2        // 用来限制一个块元素显示的文本行数

display: -webkit-box        // 和1结合使用，将对象作为弹性伸缩盒对象的子元素

-webkit-box-orient: vertical        // 和1结合使用，设置或检索伸缩盒对象的子元素的排列方式

overflow:hidden        // 文本溢出限定的宽度就隐藏内容

text-overflow: ellipsis        // 多行文本的情况下，用省略号"..."隐藏溢出范围的文本

 

相关文章：

实现单行/多行文本溢出

在日常开发展示页面&#xff0c;如果一段文本的数量过长&#xff0c;受制于元素宽度的因素&#xff0c;有可能不能完全显示&#xff0c;为了提高用户的使用体验&#xff0c;这个时候就需要我们把溢出的文本显示成省略号。 一. 单行文本溢出 即文本在一行内显示&#xff0c;超出…...

编程日记 2023/10/1 20:32:38

Spring Boot中的Binder类

介绍 Spring Boot中的Binder类是一个用于绑定属性的工具类。它可以将配置文件中的属性值绑定到Java对象中&#xff0c;从而方便地进行配置管理。 简单示例 import org.springframework.boot.context.properties.bind.Binder; import org.springframework.core.env.Environmen…...

编程日记 2023/10/1 20:31:38

leetcode之打家劫舍

leetcode 198 打家劫舍 leetcode 213 打家劫舍 II leetcode 337. 打家劫舍 III 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋&#xff0c;每间房内都藏有一定的现金。这个地方所有的房屋都 围成一圈 &#xff0c;这意味着第一个房屋和最后一个房屋是紧挨着的。同时&#…...

编程日记 2023/10/1 20:30:36

走进Spring的世界 —— Spring底层核心原理解析（一）

文章目录 前言一、Spring中是如何创建一个对象二、Bean的创建过程三、推断构造方法四、AOP大致流程五、Spring事务 前言 ClassPathXmlApplicationContext context new ClassPathXmlApplicationContext("config.xml"); UserService userService (UserService) cont…...

编程日记 2023/10/1 20:28:35

快看看你的手机有没有：谷歌Android全面封杀此类软件！

谷歌坐不住了&#xff0c;因为Android应用商店中&#xff0c;充斥着大量可窃取用户数据的应用&#xff0c;所以必然要出手整治了。 一款名叫“SonicSpy”软件是整个事情的导火索&#xff0c;而该应用是典型的窃取用户数据的应用&#xff0c;其除了可以从手机中提取个人数据外&…...

编程日记 2023/10/1 20:26:33

spark ui 指南

spark ui 指南 1.sparkUI 基本介绍2.jobs页面3.stages 页面4.storage 页面5.environment 页面6.ececutor 页面7 sql 页面  spark ui 是反应一个spark 作业执行情况的页面,通过查看作业的执行情况,分析作业运行的状态. 1.sparkUI 基本介绍 进入运行主页面如下,主要有6各部…...

编程日记 2023/10/1 20:25:33

【分布式事务】

文章目录 解决分布式事务的思路seata四种模式1. XA模式2. AT模式AT模式与XA模式的区别是什么&#xff1f;脏写问题 3. TCC模式事务悬挂和空回滚 4. SAGA模式 四种模式对比口述AT模式与TCC模式高可用 什么是分布式事务&#xff1f; 分布式事务&#xff0c;就是指不是在单个服务或…...

编程日记 2023/10/1 20:19:27

linux 清除卸载jenkins

1、停服务进程 查看jenkins服务是否在运行&#xff0c;如果在运行&#xff0c;停掉 查看服务 ps -ef|grep jenkins 停掉进程 kill -9 XXX2、查找安装目录 find / -name "jenkins*"3、删掉相关目录 删掉相关安装目录 rm -rf /root/.jenkins/# 删掉war包 rm -rf /…...

编程日记 2023/10/1 20:18:27

番外4：VMware安装

step4: 安装过程中&#xff0c;有些选项不需要点&#xff08;安装地址建议选C盘或默认&#xff0c;装载在其他盘后续会报错&#xff09;&#xff0c;如&#xff1a; may error&#xff08;本人猜测安装虚拟机完整版需要C盘的一些桥插件支持&#xff09;: step5: 安装虚拟机成功…...

编程日记 2023/10/1 20:17:26

Oracle 19.20 patch 注意事项

1. 打patch 用root 打 /u01/app/19.0.0/grid/OPatch/opatchauto apply /u01/app/patch/35319490 2.打patch 之前 所有NODE上OPatch 版本要一样 3. OPatch 目录不要是root权限 4.打一台&#xff0c;一台自动重启。 有几个node 在几个node 打。patch 都要传到不同的node上 …...

编程日记 2023/10/1 20:14:23

ElementUI之增删改及表单验证

⭐⭐本文章收录与ElementUI原创专栏&#xff1a;ElementUI专栏 ⭐⭐ ElementUI的官网&#xff1a;ElementUI官网 目录 一.前言 二.使用ElementUI完成增删改 2.1 后台代码 2.2 前端代码 三.使用ElementUI完成表单验证 一.前言 本章是继上一篇的基础之上在做完善&#xff0…...

编程日记 2023/10/1 20:12:22

【Java 进阶篇】深入理解 JDBC：Java 数据库连接详解

数据库是现代应用程序的核心组成部分之一。无论是 Web 应用、移动应用还是桌面应用&#xff0c;几乎都需要与数据库交互以存储和检索数据。Java 提供了一种强大的方式来实现与数据库的交互&#xff0c;即 JDBC&#xff08;Java 数据库连接&#xff09;。本文将深入探讨 JDBC 的…...

编程日记 2023/10/1 20:08:18

Web开发-session介绍

目录 session介绍session使用场景session具体使用需要注意的是 session介绍 session 可以被看作是一种缓冲区&#xff0c;用于在多个请求之间存储和传递用户数据。在 Web 应用程序中&#xff0c;session 通常用于存储用户登录信息、购物车数据、用户偏好设置等。当用户在应用程…...

编程日记 2023/10/1 20:07:17

基于Qt Creator开发的坦克大战小游戏

目录 介绍开发环境技术介绍安装说明项目目录设计思想项目介绍运行演示知识点记录Gitee源码链接 介绍 &#xff01;&#xff01;&#xff01;资源图片是从网上免费下载&#xff0c;源码都是原创&#xff0c;供个人学习使用&#xff0c;非盈利&#xff01;&#xff01;&#xff…...

编程日记 2023/10/1 20:06:16

小说推文和短剧推广以及电影达人带货电影票

小说推文、短剧推广、电影达人&#xff08;带或电影票&#xff09;都可以通过“巨量推文“进行申请授权 小说推文和短剧推广是什么&#xff1f; 小说推文和短剧推广的逻辑其实一样&#xff0c;分为cpa拉新和cps分成的推广形式 cpa拉新是你推广的用户必须为新用户&#xff0c…...

编程日记 2023/10/1 20:01:12

朴素贝叶斯分类（下）：数据挖掘十大算法之一

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ 🐴作者：秋无之地 🐴简介：CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作，主要擅长领域有：爬虫、后端、大数据开发、数据分析等。 🐴欢迎小伙伴们点赞👍🏻、收藏⭐️、…...

编程日记 2023/10/1 20:00:11

9.30作业

C语言基础考题&#xff08;40&#xff09; 选择题 20分每题2分 1、已知字母A的ASCII码为十进制数值65&#xff0c;且S为字符型&#xff0c;则执行语句SA6-3&#xff1b;后S中的值为 ( ) A.D B.68 C.不确定的值 D.C 2、若有定义语句&#xff1a;int a12;&#xff0c;则执…...

编程日记 2023/10/1 19:56:07

[GWCTF 2019]枯燥的抽奖

参考 https://www.cnblogs.com/AikN/p/15764428.html [GWCTF 2019]枯燥的抽奖-CSDN博客 打开环境 笑死我了&#xff0c;怎么那么像我高中校长 查看源代码 看到check.php&#xff0c;去访问一下 ok看到源代码了 因为上次做过&#xff0c;看到这个我就想到用php_mt_seed逆推…...

编程日记 2023/10/1 19:49:02

vue3中sync修饰符的使用

props是子组件与父组件进行通信的常用方式&#xff0c;使用步骤主要有以下几个&#xff1a; 1. 在子组件中定义props要从父组件接收的变量&#xff08;变量的类型必须写明&#xff0c;默认值可选&#xff09; // 这里以 document.vue 子组件为例 // 通过 defineProps 宏的方…...

编程日记 2023/10/1 19:48:01

Qt全屏显示与退出

仿照 按Escape键退出程序中的实现&#xff0c;我们在程序开始的时候全屏显示&#xff0c;按esc键的时候退出全屏。 showFullScreen 全屏显示只需要调用QWidget类&#xff08;QMainWindow也是一个QWidget类&#xff09;的 showFullScreen() 成员函数即可。 退出全屏&#x…...

编程日记 2023/10/1 19:44:59

OpenCV之直线曲线拟合

直线拟合fitLine void fitLine( InputArray points, OutputArray line, int distType,double param, double reps, double aeps ); points:二维点的数组或vector line:输出直线,Vec4f (2d)或Vec6f (3d)的vector distType:距离类型 param:距离参数 reps:径向的精度参数 a…...

编程日记 2023/10/1 19:43:58

2023年哪款PDF虚拟打印机好用？

PDF文档想必大家都不陌生&#xff0c;在工作中经常会用到该格式的文档&#xff0c;那么有哪些方法能制作PDF文档呢&#xff1f;一般都是借助PDF虚拟打印机的&#xff0c;那么有哪些好用的软件呢&#xff1f; pdfFactory不仅为用户提供了丰富的PDF文档生成、打印功能&#xff0…...

编程日记 2023/10/1 19:42:57

Redis各数据类型特定的命令和用法 1.0版本

目录 一、Sring数据类型1.1 概述1.2 set/get/append/strlen命令1.3 incr/decr/incrby/decrby 命令1.4 getset命令1.5 setex命令1.6 setnx命令1.7 mset/mget/msetnx命令 二、List数据类型2.1 概述2.2 lpush/lpushx/lrange命令2.3 lpop/llen命令2.4 lrem/lset/lindex/ltrim命令2.…...

编程日记 2023/10/1 19:37:52

卫星图像应用 - 洪水检测 使用DALI进行数据预处理

这篇文章是上一篇的延申。 运行环境&#xff1a;Google Colab 1. 当今的深度学习应用包含由许多串行运算组成的、复杂的多阶段数据处理流水线&#xff0c;仅依靠 CPU 处理这些流水线已成为限制性能和可扩展性的瓶颈。 2. DALI 是一个用于加载和预处理数据的库&#xff0c;可…...

编程日记 2023/10/1 19:35:50

为什么字节大量用GO而不是Java？

见字如面&#xff0c;我是军哥。 我看很多程序员对字节编程语言选型很好奇&#xff0c;为此我还特地问了在字节的两位4-1的技术大佬朋友&#xff0c;然后加上自己的思考&#xff0c;总结了一下就以下 2 个原因&#xff1a; 1、 选型上没有历史包袱 字节的早期的程序员大多来自于…...

编程日记 2023/10/1 19:34:49

Hive SQL初级练习（30题）

前言 Hive 的重要性不必多说&#xff0c;离线批处理的王者&#xff0c;Hive 用来做数据分析&#xff0c;SQL 基础必须十分牢固。 环境准备 建表语句 这里建4张表&#xff0c;下面的练习题都用这些数据。 -- 创建学生表 create table if not exists student_info(stu_id st…...

编程日记 2023/10/1 19:33:48

NSSCTF做题（6）

[HCTF 2018]Warmup 查看源代码得到 开始代码审计 <?php highlight_file(__FILE__); class emmm { public static function checkFile(&$page) { $whitelist ["source">"source.php","hint"…...

编程日记 2023/10/1 19:32:47

公众号商城小程序的作用是什么

公众号是微信平台重要的生态体系之一&#xff0c;它可以与其它体系连接实现多种效果&#xff0c;同时公众号内容创作者非常多&#xff0c;个人或企业商家等&#xff0c;会通过公众号分享信息或获得收益等&#xff0c;而当商家需要在微信做私域经营或想要转化粉丝、售卖产品时就…...

编程日记 2023/10/1 19:30:45

关于 FOCA

目录 注意团队成员成品官网项目社区 版本信息致谢 注意 此文章会随时更新&#xff0c;最好收藏起来&#xff0c;总对你有好处。我们不定时发布一些 IT 内容&#xff0c;所以请关注我们。 此账号为 FOCA 唯一的官方账号&#xff0c;请勿轻易相信其他账号所发布内容。 团队 全…...

编程日记 2023/10/1 19:29:44

TVP专家谈腾讯云 Cloud Studio：开启云端开发新篇章

导语 | 近日&#xff0c;由腾讯云 TVP 团队倾力打造的 TVP 吐槽大会第六期「腾讯云 Cloud Studio」专场圆满落幕&#xff0c;6 位资深的 TVP 专家深度体验腾讯云 Cloud Studio 产品&#xff0c;提出了直击痛点的意见与建议&#xff0c;同时也充分肯定了腾讯云 Cloud Studio 的实…...

编程日记 2023/10/1 19:27:43

网站建设一个月做十单/网站入口百度

1 &#xff0c;启动 zookeeper 命令 &#xff1a;( ) 2 &#xff0c;查看 zookeeper 启动状态命令 &#xff1a;( ) 3 &#xff0c;停止 zookeeper 命令 &#xff1a;( ) 4 &#xff0c;动手题 &#xff1a;请编写老师在课上写的 3 个 shell 脚本&#xff0c;一键启动集群&…...

编程日记 2025/1/11 11:44:19

开锁都在什么网站做/淘宝seo搜索引擎原理

1、循环 1.1、for循环 语法结构&#xff1a; for(初始化变量; 条件表达式; 操作表达式 ){//循环体 } 名称作用初始化变量通常被用于初始化一个计数器&#xff0c;该表达式可以使用 var 关键字声明新的变量&#xff0c;这个变量帮我们来记录次数。条件表达式用于确定每一次循…...

编程日记 2025/1/11 11:25:01

360免费建站可靠吗/一站式网络营销

我们在做应用程序的时候有时候想知道页面上的按钮对于某一事件委托链上有多少方法&#xff0c;下面是一个例子。1、先添加3个按钮&#xff0c;分别添加0个&#xff0c;1个&#xff0c;2个click事件的方法&#xff0c;按钮名字分别为button1&#xff0c;button2&#xff0c;butt…...

编程日记 2025/1/11 6:54:47

电子商务网站建设与管理试卷/口碑最好的it培训机构

Java集合 1、Java常见的容器 常见的容器主要包括collection和Map两种&#xff0c;Collection存储对象的集合 Map存储着键值对&#xff08;两个对象&#xff09;的映射表 &#xff0c;hashmap里面底层数据结构实现是&#xff1a;entry数组、node数组、链表/红黑树 entry和node都…...

编程日记 2025/1/11 6:47:38

在香港建设黄色网站是否违法/免费的推文制作网站

原因是Protocol buffers协议多了以后后整个项目比较大&#xff0c;超过了idea的限制了&#xff0c;调节下配置就可以了。找到idea安装目录bin/idea.properties文件 idea.max.intellisense.filesize92500 #默认2500...

编程日记 2025/1/11 3:33:48

印度做网站/网络销售公司经营范围

接下来就是我要介绍的论文Zhou D, Frmont V, Quost B, et al. Moving Object Detection and Segmentation in Urban Environments from a Moving Platform ☆[J]. Image & Vision Computing, 2017, 68.这是一篇2017 的论文&#xff0c;发表在HAL&#xff0c;HAL is a multi…...

编程日记 2025/1/11 3:25:45