css溢出隐藏的五种方法

一、文本溢出

当容器中的文本内容超出容器的宽度或高度时,就会出现文本溢出的情况。下面介绍几种CSS实现文本溢出的方法。

单行文本溢出省略:

单行文本溢出省略通常用于标题等文本显示,可以通过设置white-space和text-overflow属性实现。white-space属性:用来设置元素中的空白如何处理,默认值为normal,即会自动忽略多余的空格和换行符。当设为nowrap时,文本不会换行。

text-overflow属性:用来控制溢出文本的显示方式,默认值为clip,即将溢出部分截去。当设置为ellipsis时,会显示省略号。

代码示例:

<style>.overflow {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
</style>
<div class="overflow">这是一段需要溢出省略的文本内容</div>

多行文本溢出省略:

多行文本溢出省略也可以通过设置text-overflow属性来实现。但是,text-overflow属性对于多行文本是不起作用的,需要结合其他属性来实现。

-webkit-line-clamp属性:用来限制显示的行数。

display属性:用来设置容器的display属性为-webkit-box,使其变成一个块级盒子。

-webkit-box-orient属性:用来设置块级盒子的排列方向为垂直方向。

代码示例:

<style>.overflow {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;text-overflow: ellipsis;overflow: hidden;}
</style>
<div class="overflow">这是一段需要溢出省略的多行文本内容,如果文本过长会出现省略号</div>

二、多行省略

多行省略主要是用来实现在固定高度的容器中,将超出容器高度的文本省略掉。同样,对于单行文本省略,可以使用text-overflow属性,但对于多行省略,则需要结合其他属性来实现。

使用纯文本实现

通过调整行高和高度来实现多行文本省略。

代码示例:

<style>.ellipsis {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;line-height: 25px;height: 50px;}
</style>
<div class="ellipsis">这是一段需要省略的多行文本内容,如果文本过长会出现省略号</div>

使用伪元素实现

通过伪元素在文本后面添加省略号来实现多行文本省略。

代码示例:

<style>.ellipsis::before {content: "...";position: absolute;bottom: 0;right: 0;padding-left: 10px;background: white;}.ellipsis {position: relative;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;line-height: 25px;height: 50px;}
</style>
<div class="ellipsis">这是一段需要省略的多行文本内容,如果文本过长会出现省略号</div>

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

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

相关文章

ADW300物联网电表支持MODBUSTCP协议、MQTT协议-安科瑞黄安南

摘要 随着通信技术的应用越来越广泛&#xff0c;具有通信功能的电子产品越来越多&#xff0c;同时也随着Wi-Fi无线覆盖网络区域的形成&#xff0c;如何利用无线网络覆盖广、带宽高、低使用费率的优势组建物联网系统&#xff0c;变成了一个很实际的问题。 安科瑞也紧跟趋势推出…

antv-G6知识图谱安装--使用(实例)--连接线修改成动态,并添加跟随线移动的光圈,设置分支跟踪定位功能

这系列文章主要是完成一个图谱的自定义修改&#xff08;最近太忙了长篇分段更新自己使用流程&#xff09; 1. 连接线修改成动态&#xff0c;并添加跟随线移动的光圈 2. 自定义卡片样式和文字内容 3. 自定义伸缩节点的样式&#xff0c;并添加动画样式 3. 自定义弹窗样式 4. 自定…

lvs负载均衡、LVS集群部署

四&#xff1a;LVS集群部署 lvs给nginx做负载均衡项目 218lvs&#xff08;DR 负载均衡器&#xff09; yum -y install ipvsadm&#xff08;安装这个工具来管理lvs&#xff09; 设置VIP192.168.142.120 创建ipvsadm的文件用来存放lvs的规则 定义策略 ipvsadm -C //清空现有…

消费者遭李佳琦“痛刺”,背后MCN机构拦不住祸从口出

撰稿|行星 来源|贝多财经 9月11日凌晨&#xff0c;头部主播李佳琦就“直播间怼网友”一事在微博发表公开道歉。 李佳琦在9月10日直播带货时&#xff0c;被网友质疑“花西子的眉笔越来越贵了”&#xff0c;当即表示“哪里贵了&#xff1f;这么多年都是这个价格&#xff0c;不…

自己设计CPU学习之路——基于《Xilinx FPGA应用开发》

1. 一个32组位宽为32的寄存器堆 框图 代码 regfile.h ifndef __FEGFILE_HEADER__define __REGFILE_HEADER__define HIGH 1b1define LOW 1b0define ENABLE_ 1b0define DISABLE_ 1b1define DATA_W 32define DataBus 31:0define DATA_D 32d…

C 语言中关键字const

const 是 C 语言中的一个关键字&#xff0c;它表示一个对象或变量是常量&#xff0c;即在其生命周期内不可更改。在 C 语言中&#xff0c;const 有多种用法&#xff0c;可以提高代码的可读性和安全性。这里列举了一些关于 const 的常见用法&#xff1a; 声明常量变量&#xff…

正中优配:月线macd指标参数设置?

随着投资者长期持有股票的越来越受欢迎&#xff0c;月线MACD目标已成为识别趋势和交易信号的重要东西。但是&#xff0c;许多投资者在设置MACD目标参数时仍然感到困惑。本文将从多个视点剖析&#xff0c;为您解答月线MACD目标参数设置的问题。 什么是MACD目标&#xff1f; MAC…

MATLAB解析和保存ini文件

1. 将ini文件转换成struct结构体 function data ini2struct(filename)fid fopen(filename, r);if fid -1error(Unable to open file %s., filename);enddata struct();section ;while ~feof(fid)line fgetl(fid);line strtrim(line);% 如果是注释行或者空行&#xff0c…

vue中v-for循环数组使用方法中splice删除数组元素(错误:每次都删掉点击的下面的一项)

总结&#xff1a;平常使用v-for的key都是使用index&#xff0c;这里vue官方文档也不推荐&#xff0c;这个时候就出问题了&#xff0c;我们需要key为唯一标识&#xff0c;这里我使用了时间戳&#xff08;new Date().getTime()&#xff09;处理比较复杂的情况&#xff0c; 本文章…

Spring-Cloud-Openfeign如何做熔断降级?

微服务系统中为了防止服务雪崩问题&#xff0c;服务之间相互调用的时候一般需要开启熔断与降级&#xff0c;下面就来看下feign如何集成hystrix来做熔断与降级。 依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-c…

Full authentication is required to access this resource解决办法

我们在使用postman调接口时候&#xff0c;有的时候需要权限才可以访问&#xff0c;否则可能会报下面这个错误 {"success": false,"message": "Full authentication is required to access this resource","code": 401,"result&q…

浏览器缓存机制及其分类

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 强缓存&#xff08;Cache-Control 和 Expires&#xff09;⭐ 协商缓存&#xff08;ETag 和 Last-Modified&#xff09;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几…

四川百幕晟科技:抖音新店怎么快速起店?

抖音作为全球最大的短视频平台&#xff0c;拥有庞大的用户基础和强大的影响力&#xff0c;成为众多商家宣传产品、增加销量的理想选择。那么&#xff0c;如何快速开店并成功运营呢&#xff1f;下面描述了一些关键步骤。 1、如何快速开新店&#xff1f; 1、确定产品定位&#x…

docker配置nginx,并部署多个项目

前言 基于开发需要需要使用Docker安装nginx&#xff0c;并部署多个前端项目。 1、docker安装nginx容器 docker pull nginx# 挂载项目静态资源和配置文件 docker run --name nginx -p 8088:8088 \ -v /ruoyi/nginx/html:/usr/share/nginx/html \ -v /ruoyi/nginx/conf/nginx…

JVM GC垃圾回收

一、GC垃圾回收算法 标记-清除算法 算法分为“标记”和“清除”阶段&#xff1a;标记存活的对象&#xff0c; 统一回收所有未被标记的对象(一般选择这种)&#xff1b;也可以反过来&#xff0c;标记出所有需要回收的对象&#xff0c;在标记完成后统一回收所有被标记的对象 。它…

geopandas笔记:汇总连接两个区域的边

比如这样的两个区域&#xff0c;我们想知道从蓝到绿、从绿到蓝都有哪些边 1 读取openstreetmap import osmnx as ox import geopandas as gpdGox.graph_from_place(Singapore,simplifyTrue,network_typedrive)ox.plot_graph(G) 2 得到对应的边的信息 nodes,edgesox.graph_to_…

基于Spring Boot的酒店客房管理系统

文章目录 项目介绍主要功能截图:后台:前台部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring Boot的酒店客房管…

一键切换开发环境

一键切换开发环境 在我们正常开发中&#xff0c;经常会遇到切换代理环境的问题&#xff0c;总不能每次切换的时候都需要重启吧 解决方案&#xff1a; 1.1 利用host解决代理问题&#xff0c;代码如下 devServer: {proxy: 127.0.0.1,...}1.2. 需要有起一个node 服务 &#xff…

Spring Bean 的作用域(Bean Scope)

前言 大家好&#xff0c;我是 god23bin&#xff0c;今天我们来聊一聊 Spring 框架中的 Bean 作用域&#xff08;Scope&#xff09;。 什么是 Bean 的作用域&#xff1f; 我们在以 XML 作为配置元数据的情况下&#xff0c;进行 Bean 的定义&#xff0c;是这样的&#xff1a; …

标准C++day3——构造、析构函数和初始化列表

一、面向对象和面向过程 面向过程&#xff1a; 关注如何解决问题&#xff0c;以及解决问题的步骤 面向对象&#xff1a; 关注的解决问题的"人"-"对象"&#xff0c;以及实现能解决问题的"对象" 抽象&#xff1a;先找出(想象)能解决问题的"对…