【css】文本过长溢出一行不换行普通css以及antd实现

.text-box {  white-space: nowrap; /* 防止文字换行 */  overflow: hidden; /* 隐藏超出div的内容 */  text-overflow: ellipsis; /* 当内容超出时,显示省略号 */  max-width: calc(100% - 80px); /* 假设按钮宽度为80px,则设置div的最大宽度为容器宽度减去按钮宽度 */  /* 或者你可以直接设置一个具体的像素值作为最大宽度 */  
}  

当使用antd组件时,Typography组件可以用更少的代码,该代码限制1行

import { Typography } from 'antd';const { Paragraph } = Typography;
<div><Paragraph ellipsis={{rows:1}}>excessively long text, excessively long text, excessively long text</Paragraph>
</div>

在这里插入图片描述
使用说明:
rows: number 类型
这个属性定义了当标题内容过长时,应该显示的行数。例如,如果你设置 rows={1},那么当标题内容超过一行时,它会被截断并显示省略号。

expandable: boolean 类型
这个属性决定了当标题内容被截断时,是否显示一个可以展开内容的按钮。如果设置为 true,那么当内容被截断时,用户可以通过点击按钮来查看完整内容。

onExpand: Function 类型
这是一个回调函数,当用户点击展开按钮以查看完整内容时会被调用。这个函数可以接收一个参数,表示当前的展开状态(通常是 true 或 false)。你可以在这个函数中执行一些操作,比如更新组件的状态或发送请求来获取更多内容。

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

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

相关文章

【华为OD机试】根据IP查找城市(贪心算法—JavaPythonC++JS实现)

本文收录于专栏:算法之翼 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目二.解题思路三.题解代码Python题解代码JAVA题解代码C/C++题解代码JS题解代码四.代码讲解(Ja…

Nginx配置使用笔记

Nginx配置使用笔记 前言 官网下载压缩包https://nginx.org/ 解压完成后当前目录cmd输入nginx指令启动 访问http://localhost:80确认启动成功 1.部署前端项目 部署前端项目到路径E:\Workspaces\Vscode\app-web 2.0配置nginx.conf文件 在nginx安装的conf目录下新建一个文件夹l…

Mysql索引总结(1)

文章目录 InnoDB索引与MyISAM索引实现的区别是什么&#xff1f;一个表中如果没有创建索引&#xff0c;那么还会创建B树吗&#xff1f;B树索引实现原理&#xff08;数据结构&#xff09; InnoDB索引与MyISAM索引实现的区别是什么&#xff1f; MyISAM的索引方式都是非聚簇的&…

07-app端文章搜索

app端文章搜索 1) 今日内容介绍 1.1)App端搜索-效果图 1.2)今日内容 文章搜索 ElasticSearch环境搭建 索引库创建 文章搜索多条件复合查询 索引数据同步 搜索历史记录 Mongodb环境搭建 异步保存搜索历史 查看搜索历史列表 删除搜索历史 联想词查询 联想词的来源 联…

elasticSearch原理浅尝

终于等到你 马上就要放弃 开个玩笑 &#xff0c;进入正题 on fire 基础的咱不说了&#xff0c;一搜一麻袋 读 全文检索&#xff1a; 协调节点广播查询请求到相关分片 并 将其响应 整合 全局排序 返回结果集合 带路由&#xff1a;具体文档 shard hash(document_id) % (…

redis进阶入门主从复制与哨兵集群

一、主从复制 1.1背景 一般来说&#xff0c;要将 Redis用于工程项目中&#xff0c;只使用一台 Redist是万万不能的&#xff0c;原因如下&#xff1a; 从结构上&#xff0c;单个 Redist服务器会发生单点故障&#xff0c;井且一台服务器需要处理所有的请求负載&#xff0c;压力…

HTML基础知识详解(上)(如何想知道html的全部基础知识点,那么只看这一篇就足够了!)

前言&#xff1a;在学习前端基础时&#xff0c;必不可少的就是三大件&#xff08;html、css、javascript &#xff09;&#xff0c;而HTML&#xff08;超文本标记语言——HyperText Markup Language&#xff09;是构成 Web 世界的一砖一瓦&#xff0c;它定义了网页内容的含义和…

P1570 KC 喝咖啡

P1570 KC 喝咖啡 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 让求 ∑ v i ∑ c i \frac { \sum{ v_i}} { \sum{c_i}} ∑ci​∑vi​​的最大值&#xff0c;假设值为 a n s ans ans&#xff0c;则 a n s ∑ v i ∑ c i ans \frac {\sum{v_i}} {\sum{c_i}} ans∑ci​∑vi​…

物联网实战--驱动篇之(一)EEPROM存储器(AT24C64)

目录 一、驱动概述 二、AT24C64简介 三、驱动编写 四、驱动应用 一、驱动概述 这是驱动篇的第一篇&#xff0c;所以先说明下驱动篇的作用和书写计划。之前的净化器项目已有提及&#xff0c;向ESP8266、SHT30这些都属于驱动设备&#xff0c;主芯片STM32是核心&#xff0c;相…

C++从入门到精通——范围for的使用

范围for的使用 前言一、&#xff08;引言&#xff09;python中for循环的使用二、C中的范围forC语言中的for循环C中的范围for的语法不使用范围for的正常写法范围for的写法正常范围forauto自动推导范围for 三、范围for的使用条件for循环迭代的范围必须是确定的迭代的对象要实现和…

第五节 LLava模型数据处理源码解读(input_ids/labels/attention_mask/image,上篇)

文章目录 前言一、torch.nn.utils.rnn.pad_sequence与torch.ne函数1、torch.nn.utils.rnn.pad_sequence函数功能解读1、函数原理2、demo示列3、demo结果对比2、torch.ne函数介绍二、图像与语言加载1、语言处理tokenizer的来源2、图像处理process的来源3、数据加工方法三、数据加…

redis 数据库的安装及使用方法

目录 一 关系数据库与非关系型数据库 &#xff08;一&#xff09;关系型数据库 1&#xff0c;关系型数据库是什么 2&#xff0c;主流的关系型数据库有哪些 3&#xff0c;关系型数据库注意事项 &#xff08;二&#xff09;非关系型数据库 1&#xff0c;非关系型数据库是…

vue-element-template 设置权限管理配置文件 \ vue用户权限管理

最近使用vue-element-template模板做系统时&#xff0c;需要实现用户权限管理&#xff0c;通过后端传来的roles字段来判断不同用户的身份&#xff0c;不同用户显示不同的侧边栏&#xff0c;下面是配置方法&#xff1a; 0.需要配置的文件有&#xff1a; src/routersrc/store/mo…

模拟---算法

1、定义 仅仅使用较简单的算法和数据结构的题目。模拟顾名思义,按照题目的要求,一步步写出代码。 特点:模拟题目通常是具有码量大、操作多、思路繁复的特点。 2、步骤 读题,读懂题目的意思,要知道题目想做什么建模,利用什么样的数据结构来实现代码实现,写出代码框架调…

maven上传pom和jar文件到远程仓库

上传.pom文件 例如只想要上传 Spring Cloud Dependencies 的 .pom 文件到 Maven 远程仓库&#xff0c;可以执行如下命令 mvn deploy:deploy-file -Durlrepository-url -DrepositoryIdrepository-id -Dfilepath-to-pom-file -DpomFilepath-to-pom-file其中&#xff0c;需要…

day04-MQ

1.初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。异步通讯&#xff1a;就像发邮件&#xff0c;不需要马上回复。 两种方式各有优劣&#xff0c;打电话可以立即得到响应&#xff0c;但是你…

LeNet卷积神经网络

文章目录 简介conv2d网络层的结构 简介 它是最早发布的卷积神经网络之一 conv2d 这个卷积成的参数先进行介绍一下&#xff1a; self.conv1 nn.Conv2d(in_channels3, out_channels10, kernel_size3, stride1, padding1)先看一下in_channels 输入的通道数&#xff0c;out_cha…

蓝桥杯备考随手记: practise06

问题描述: 一个字符串的非空子串是指字符串中长度至少为1 的连续的一段字符组成的串。 例如&#xff0c;字符串aaab 有非空子串a, b, aa, ab, aaa, aab, aaab&#xff0c;一共7 个。 注意在计算时&#xff0c;只算本质不同的串的个数。 请问&#xff0c;字符串01001100010100…

Redis从入门到精通(五)Redis实战(二)商户查询缓存

↑↑↑请在文章头部下载测试项目原代码↑↑↑ 文章目录 前言4.2 商户查询缓存4.2.1 缓存介绍4.2.2 查询商户信息的传统做法4.2.2.1 接口文档4.2.2.2 代码实现4.2.2.3 功能测试 4.2.3 查询商户信息添加Redis缓存4.2.3.1 逻辑分析4.2.3.2 代码实现4.2.3.3 功能测试 4.2.3 数据一致…

接口的总结与面试题

接口本身不能创建对象&#xff0c;只能创建接口的实现类对象&#xff0c;接口类型的变量可以与实现类对象构成多态引用。 声明接口用interface&#xff0c;接口的成员声明有限制&#xff1a; &#xff08;1&#xff09;公共的静态常量 &#xff08;2&#xff09;公共的抽象方…