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

实现单行/多行文本溢出

news 2026/3/26 16:39:53

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

一. 单行文本溢出

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

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

蛋白质设计实战：基于RFdiffusion的Motif Scaffolding功能位点定制化设计

1. 认识RFdiffusion与Motif Scaffolding 第一次接触蛋白质设计时&#xff0c;我被这个领域的复杂性震撼到了。20种氨基酸就像乐高积木&#xff0c;但它们的组合方式比宇宙中的星辰还要多。而RFdiffusion就像是一把神奇的钥匙&#xff0c;帮我打开了蛋白质设计的大门。 RFdiffus…...

编程新知 2026/3/26 15:58:51

嵌入式软件架构设计与实践指南

## 1. 嵌入式软件架构设计概述### 1.1 嵌入式系统发展现状 现代嵌入式系统硬件性能已实现质的飞跃&#xff0c;以Marvell PXA3xx系列处理器为例&#xff0c;其主频可达800MHz&#xff0c;集成USB、WIFI、2D图形加速和32位DDR内存控制器。软件层面&#xff0c;Symbian、Linux、W…...

编程新知 2026/3/26 15:52:44

滚动轴承动力学模型代码复现及三维模型SolidWorks文件分享

滚动轴承动力学模型代码 #指定了某篇paper复现&#xff0c;具体都如图打包在文件夹了&#xff0c;保证程序可以打开。 给出轴承三维模型solidworks软件打开2019版本可以打开。打开SolidWorks轴承模型时&#xff0c;金属滚珠与保持架的精密配合让人想起小时候拆解机械闹钟的经历…...

编程新知 2026/3/26 15:50:39

brpc服务发现服务健康状态：集成外部健康检查的终极指南

brpc服务发现服务健康状态&#xff1a;集成外部健康检查的终极指南 【免费下载链接】brpc brpc is an Industrial-grade RPC framework using C Language, which is often used in high performance system such as Search, Storage, Machine learning, Advertisement, Recomme…...

编程新知 2026/3/26 15:05:57

Windows Insider离线管理完全指南：无账户切换方法与命令行操作技巧

Windows Insider离线管理完全指南&#xff1a;无账户切换方法与命令行操作技巧 【免费下载链接】offlineinsiderenroll 项目地址: https://gitcode.com/gh_mirrors/of/offlineinsiderenroll 在Windows系统管理中&#xff0c;用户常常面临需要在不同更新通道间切换的需求…...

编程新知 2026/3/26 14:05:15

动态规划专练:力扣第509、70、746题

由于对动态规划DP算法 掌握得不是很好&#xff0c;所以决定进行动态规划专项训练。动态规划五部曲①确定dp[i]含义②递推公式③dp数组如何初始化④遍历顺序⑤打印dp数组&#xff08;debug&#xff09;除了第五条在力扣上不开会员无法实现外&#xff0c;其余四项就是做出dp类型题…...

编程新知 2026/3/26 12:44:39

3分钟快速上手：DouYinBot抖音无水印视频下载终极指南 [特殊字符]

3分钟快速上手&#xff1a;DouYinBot抖音无水印视频下载终极指南 &#x1f680; 【免费下载链接】DouYinBot 抖音无水印下载 项目地址: https://gitcode.com/gh_mirrors/do/DouYinBot 在短视频内容创作和分享的时代&#xff0c;如何快速获取无水印的抖音视频成为创作者和…...

编程新知 2026/3/26 12:26:33

从零开始：CosyVoice 2 声码器入门指南与实战解析

在语音合成的世界里&#xff0c;声码器扮演着“声音雕刻师”的角色。简单来说&#xff0c;它负责将一串抽象的特征&#xff08;比如梅尔频谱&#xff09;转换为我们耳朵能听到的、连续的真实音频波形。没有它&#xff0c;再好的文本转语音模型也只能输出“哑巴”数据。然而&…...

编程新知 2026/3/26 11:41:57

故障诊断指南：用STFT在5分钟内定位工业设备异常时间点（MATLAB版）

故障诊断实战&#xff1a;STFT在工业设备异常定位中的高效应用&#xff08;MATLAB实现&#xff09; 工业设备的异常检测如同医生听诊&#xff0c;需要精准捕捉故障的"心跳节律"。传统方法往往只能告诉我们"设备病了"&#xff0c;却难以定位"何时发病…...

编程新知 2026/3/26 11:23:54

Onekey核心价值解析：5个维度带你重新认识Steam游戏清单获取

Onekey核心价值解析&#xff1a;5个维度带你重新认识Steam游戏清单获取 【免费下载链接】Onekey Onekey Steam Depot Manifest Downloader 项目地址: https://gitcode.com/gh_mirrors/one/Onekey Onekey是一款开源的Steam Depot清单下载器&#xff0c;通过智能化的数据获…...

编程新知 2026/3/26 10:49:27