CSS单行/多行文本溢出隐藏

news2024/12/23 18:29:16

前言

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

对于文本的溢出,我们可以分成两种形式:

  • 单行文本溢出
  • 多行文本溢出

实现

单行文本溢出省略

理解也很简单,即文本在一行内显示,超出部分以省略号的形式展现

实现方式也很简单,涉及的css属性有:

  • text-overflow:规定当文本溢出时,显示省略符号来代表被修剪的文本
  • white-space:设置文字在一行显示,不能换行
  • overflow:文字长度超出限定宽度,则隐藏超出的内容

overflow设为hidden,普通情况用在块级元素的外层隐藏内部溢出元素,或者配合下面两个属性实现文本溢出省略

white-space:nowrap,作用是设置文本不换行,是overflow:hiddentext-overflow:ellipsis生效的基础

text-overflow属性值有如下:

  • clip:当对象内文本溢出部分裁切掉
  • ellipsis:当对象内文本溢出时显示省略标记(…)

text-overflow只有在设置了overflow:hiddenwhite-space:nowrap才能够生效的

多行文本溢出省略

多行文本溢出的时候,我们可以分为两种情况:

  • 基于高度截断
  • 基于行数截断

基于高度截断

伪元素 + 定位

核心的css代码结构如下:

  • position: relative:为伪元素绝对定位
  • overflow: hidden:文本溢出限定的宽度就隐藏内容)
  • position: absolute:给省略号绝对定位
  • line-height: 20px:结合元素高度,高度固定的情况下,设定行高, 控制显示行数
  • height: 40px:设定当前元素高度
  • ::after {} :设置省略号样式

代码如下所示:

<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>

<body><div class='demo'>这是一段很长的文本</div>
</body> 

实现原理很好理解,就是通过伪元素绝对定位到行尾并遮住文字,再通过 overflow: hidden 隐藏多余文字

这种实现具有以下优点:

  • 兼容性好,对各大主流浏览器有好的支持
  • 响应式截断,根据不同宽度做出调整

一般文本存在英文的时候,可以设置word-break: break-all使一个单词能够在换行时进行拆分

基于行数截断

css实现也非常简单,核心的css代码如下:

  • -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 > 

可以看到,上述使用了webkitCSS属性扩展,所以兼容浏览器范围是PC端的webkit内核的浏览器,由于移动端大多数是使用webkit,所以移动端常用该形式

需要注意的是,如果文本为一段很长的英文或者数字,则需要添加word-wrap: break-word属性

最后

为大家准备了一个前端资料包。包含54本,2.57G的前端相关电子书,《前端面试宝典(附答案和解析)》,难点、重点知识视频教程(全套)。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/138790.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

jetson nano安装远程桌面,Qt,pytorch,tensorflow,virtualenv等

文章目录基于jetPack版本4.6.1一.基础组件配置检查二.基础组件安装1.安装pip32.安装python-opencv与机器学习常用包3.安装pytorch方法1&#xff08;失败&#xff09;方法2&#xff08;成功&#xff09;4.安装tensorflow-gpu5.安装QT6.板载摄像头使用7.安装中文输入法8.安装截图…

网络爬虫入门到实战

简介 数据采集文章 开始 入门程序 环境准备 pip3 install beautifulsoup4 基本操作 from urllib.request import urlopen from bs4 import BeautifulSouphtml urlopen("http://www.baidu.com") # print(html.read()) (打印html完整内容) bsObj BeautifulSou…

服务熔断和服务降级

服务之间是可以相互调用的&#xff0c;如果底层的服务出现了问题&#xff0c;那么他的上层服务也就会出问题 为了解决分布式系统的雪崩问题&#xff0c;SpringCloud提供了Hystrix熔断器组件 服务降级 服务降级并不会直接返回错误&#xff0c;而是提供一个补救措施&#xff0c…

简洁明了的ReentrantReadWriteLock总结

&#x1f473;我亲爱的各位大佬们好 ♨️本篇文章记录的为 ReentrantReadWriteLock 相关内容&#xff0c;适合在学Java的小白,帮助新手快速上手,也适合复习中&#xff0c;面试中的大佬&#x1f649;&#x1f649;&#x1f649;。 ♨️如果文章有什么需要改进的地方还请大佬不吝…

王爽汇编(第四版)实验八

文章目录前言一、题目二、分析1.初始时指令存储情况2.运行时指令存储情况总结前言本文是学习王爽老师《汇编语言》(第四版)第九章 实验8 分析一个奇怪的程序 时的相关代码及分析。一、题目分析程序&#xff0c;思考程序是否可以正确返回&#xff1b;运行后再思考&#xff0c;为…

胭脂茉莉点评推荐上海大学法院李本教授诗集《秋月曲》诗歌6首

胭脂茉莉&#xff08;右&#xff09;和李本教授&#xff08;左&#xff09;于2019年冬天在上海留影胭脂茉莉 &#xff0c;女 &#xff0c;江苏人&#xff0c;年少习诗&#xff0c;作家、诗人。评论及随笔见诸媒体及报刊 。诗歌先后被选编入海内外多种选本及刊物&#xff0c;主要…

【我的渲染技术进阶之旅】glfw库简单介绍

文章目录一、为啥去了解glfw?二、glfw相关资料三、glfw简单示例1. 引入 GLFW 头文件2. 初始化和终止 GLFW3. 设置错误回调4. 创建窗口和上下文5.使 OpenGL 上下文成为当前上下文6. 检查窗口关闭标志7.接收输入事件8.使用 OpenGL 渲染9. 读取定时器10.交换缓冲区11. 处理事件12…

【C++】了解设计模式,模拟实现栈和队列

文章目录一.设计模式二.stack的模拟实现三.queue的模拟实现四.了解deque五、题目练习一.设计模式 设计模式有很多种&#xff0c;根据设计模式的参考书 Design Patterns - Elements of Reusable Object-Oriented Software&#xff08;中文译名&#xff1a;设计模式 - 可复用的面…

SpringBoot+VUE前后端分离项目学习笔记 - 【11 SpringBoot代码生成器_MybatisPlus】

引入mp生成器依赖 pom.xml <!-- 代码生成器 --> <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-generator</artifactId><version>3.5.1</version> </dependency> <dependency><grou…

RabbitMQ 单机安装-CentOS

RabbitMQ 单机安装-CentOS 官网查看RabbitMQ和对应的Erlang版本 进入 RabbitMQ 官网 &#xff0c;点击 顶上的 Get Started 点击Download Installation 点击左侧的Erlang Versions 查看对应版本 根据自己需要安装的RabbitMQ版本&#xff0c;找到需要Erlang的版本。 下…

什么是Spring Cloud?Spring Cloud介绍

简介Spring Cloud项目的官方网址&#xff1a;https://projects.spring.io/spring-cloud/Spring Cloud 并不是一个项目&#xff0c;而是一组项目的集合。在 Spring Cloud中包含了很多的子项目&#xff0c;每一个子项目都是一种微服务开发过程中遇到的问题的一种解决方案。它利用…

红中群内每日分享题目解析——第一天

目录 题目一&#xff1a;最后一次用的英雄 题目二&#xff1a;狗哥去哪 摩斯密码 题目三&#xff1a;黑丝白丝还有什么丝 题目一&#xff1a;最后一次用的英雄 ​​​​​​ 感谢我徒弟(不是 告知并解出此题 杭椒的博客_CSDN博客-网安经验分享,网络安全工具,CISP-PTE备考笔记…

音视频开发常用工具

目录 1.VLC播放器简介 1.1 VLC 播放器 1.2 VLC的功能列表 1.3 VLC播放网络串流 1.4 VLC作为流媒体服务器 2. MediaInfo简介 2.1 MediaInfo 2.1.1 获取多媒体文件信息 2.1.2 支持的格式 2.1.3 .查看方式 2.1.4 国际化 2.2 MediaInfo使用方法 2.3 MediaInfo参数说明 3…

将powershell、cmd和vscode终端的编码永久修改成utf-8

powershell修改方法 1、以管理员身份打开powershe New-Item $PROFILE -ItemType File -Force 2、打开C盘&#xff0c;找到我的文档中的WindowsPowerShell文件夹 3、编辑这个ps1文件&#xff08;默认是空的&#xff09;&#xff0c;加上以下代码 $OutputEncoding [console…

Handler的消息机制与消息延迟代码实现

Handler的作用 Handler消息机制在Android中的应用非常广泛&#xff0c;很多组件的底层实现都是靠Handler来完成的&#xff0c;所以掌握Handler消息机制的原理还是非常重要的。Handler的主要功能有两点&#xff1a; 1.它可以在不同的线程之间传递消息 我们都知道Andorid中规定…

menuconfig与Kconfig入门学习

概述 menuconfig是Linux平台用于管理代码工程、模块及功能的实用工具。 menuconfig的使用方式通常是在编译系统之前在系统源代码根目录下执行make menuconfig命令从而打开一个图形化配置界面&#xff0c;再通过对各项的值按需配置从而达到影响系统编译结果的目的。 Nuttx的m…

新建一个SpringMVC项目

步骤1:创建Maven项目 打开IDEA,创建一个新的web项目 步骤2:补全目录结构 因为使用骨架创建的项目结构不完整&#xff0c;需要手动补全 步骤3:导入jar包 将pom.xml中多余的内容删除掉&#xff0c;再添加SpringMVC需要的依赖 <?xml version"1.0" encoding"UT…

一文读懂远程线程注入

在红队行动中&#xff0c;红队的目的都是要在不暴露自身行动的前提下&#xff0c;向蓝队发动攻击。他们使用各种技术和程序来隐藏C2连接和数据流。攻击活动的第一步是获得初始访问权。他们会使用定制的恶意软件和有效载荷来躲避防杀软和EDR等防御工具。 在这些典型的攻击活动中…

代码中大量爆红,IDE设置jdk版本,及设置后无效的解决

代码大量爆红&#xff0c;检查ide设置的jdk版本是否与项目的java版本一致&#xff0c;做以下配置 1.project structrue 2.maven 3.如果以上设置以后没有效果&#xff0c;就把项目中的.ide文件删除&#xff0c;并且pom里面加上下面的代码&#xff0c;重启IDE。 <build&g…

植物大战僵尸:植物栏无冷却的找法

通过使用CE遍历内存&#xff0c;定位到植物无冷却的核心代码处&#xff0c;并通过修改关键的跳转来实现所有植物的无冷却。 第一种遍历修改方式 无冷却的遍历技巧1&#xff1a; 打开CE->回到游戏种植一颗向日葵 -> 扫描未知初始数值然后切回游戏 ->马上切回CE ->…