div 中文本太长用省略号隐藏展示,鼠标放上来弹出提示

需求描述

div 中有一行文本。
文本特别特别的长,
反正是超出了div所容纳的长度。
你呢,
现在想要的效果是:
1.文本就展示一行,多余的部分用省略号代替展示;
2.鼠标放上去的时候,用tip的方式展示完整的信息。就像下面的样子:

在这里插入图片描述

案例代码

  <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="xxxxxxxxx这是一个特别特别长的客户名称让我们来看看-912131231231098301298301928301983138" >xxxxxxxxx这是一个特别特别长的客户名称让我们来看看-912131231231098301298301928301983138</div>

代码解析

1.style 中的三个样式实现了 ... 的效果
2. title 实现了鼠标放上去展示全部内容的效果

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

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

相关文章

wpa_cli 连接WiFi的步骤

#启动脚本 wpa_supplicant -p /etc/wifi/sockets/ -iwlan0 -Dnl80211 -c/etc/ambaipcam/IPC_Q313/config/wlan/wpa_supplicant.conf -B #查询网卡状态 wpa_cli -p /etc/wifi/sockets/ -iwlan0 status #搜索附近网络功能 no/ok wpa_cli -p /etc/wifi/sockets/ -i wlan0 sca…

Mysql8.1.0 windows 绿色版安装

Mysql8.1.0 windows 绿色版安装 目录 Mysql8.1.0 windows 绿色版安装1、下载mysql8.1.0_windows&#xff08;mysql-8.1.0-winx64.zip&#xff09;2、解压到安装目录3、添加环境变量4、新建mysql配置文件5、安装mysql服务6、初始化数据文件7、启动mysql服务8、进入mysql管理模式…

Postgresql的ddl在事务中可以回滚,truncate时relfilenode在当前会话会改变

Postgresql的事务里面ddl可以回滚,这点和oracle不太一样。其中postgresql alter table事务操作中&#xff0c;包括回滚的整个过程中表对象的relfilenode不变&#xff0c;但是postgresql truncate事务操作中&#xff0c;一旦执行truncate操作表对象的relfilenode在当前会话就变了…

大语言模型(LLM)综述(五):使用大型语言模型的主要方法

A Survey of Large Language Models 前言6 UTILIZATION6.1 In-Context Learning6.1.1 提示公式6.1.2 演示设计6.1.3 底层机制 6.2 Chain-of-Thought Prompting6.2.1 CoT的上下文学习6.2.2 关于CoT的进一步讨论 6.3 Planning for Complex Task Solving6.3.1 整体架构6.3.2 计划生…

Leo赠书活动-03期 【ChatGPT 驱动软件开发:AI 在软件研发全流程中的革新与实践 】

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 赠书活动专栏 ✨特色专栏&#xff1a;…

《云计算白皮书(2023年)》丨三叠云

✦ ✦✦ ✦✦ ✦✦ ✦ 这是中国信息通信研究院第九次发布云计算白皮书。本次白皮书聚焦过去一年多来云计算产业的新发展新变化&#xff0c;总结梳理国内外云计算政策、市场、技术、应用等方面的发展特点&#xff0c;并对未来发展进行展望。【目 录】 一、全球云计算发展概述…

AquilaChat2-34B 主观评测接近GPT3.5水平,最新版本Base和Chat权重已开源!

两周前&#xff0c;智源研究院发布了最强开源中英双语大模型AquilaChat2-34B 并在 22项评测基准中综合能力领先&#xff0c;广受好评。为了方便开发者在低资源上运行 34B 模型&#xff0c;智源团队发布了 Int4量化版本&#xff0c;AquilaChat2-34B 模型用7B量级模型相近的GPU资…

IP网络矿用打点紧急广播方案

IP网络矿用打点紧急广播方案 一、概述 目前&#xff0c;随着计算机网络技术的迅速普及&#xff0c;信息化已经走向煤矿。很多煤矿都陆续具有了稳定可靠、覆盖矿井上下的工业以太网。科学技术的不断进步和信息化矿山建设步伐的不断加快&#xff0c;井下工业以太网将逐渐得到推…

Mysql 表读锁与表写锁

表读锁 加锁&#xff1a;lock table table_name read 释放锁&#xff1a;unlock tables 当事务一用表读锁锁住某张表后&#xff0c; 1.事务一必须释放表读锁才能访问其他表 2.期间事务2可以访问该表&#xff0c;但是修改事会遇到阻塞等待&#xff0c;只有等到事务一释放锁后…

【jenkins】centos7在线安装jenkins

一、系统要求 最低推荐配置 256MB可用内存 1GB可用磁盘空间(作为一个Docker容器运行jenkins的话推荐10GB) 软件配置 Java 8—​无论是Java运行时环境&#xff08;JRE&#xff09;还是Java开发工具包&#xff08;JDK&#xff09;都可以 二、安装jenkins 准备一台安装有ce…

零基础Linux_24(多线程)线程同步+条件变量+生产者消费模型_阻塞队列版

目录 1. 线程同步和生产者消费者模型 1.1 生产者消费者模型的概念 1.2 线程同步的概念 1.3 生产者消费者模型的优点 2. 线程同步的应用 2.1 条件变量的概念 2.2 条件变量操作接口 3. 生产者消费者模型_阻塞队列 3.1 前期代码&#xff08;轮廓&#xff09; 3.2 中期代…

JVM 类加载的过程

JVM 类加载的过程 加载验证准备解析初始化 加载 “加载”&#xff08;Loading&#xff09;阶段是整个“类加载”&#xff08;Class Loading&#xff09;过程中的一个阶段&#xff0c;它和类加载 Class Loading 是不同的&#xff0c;一个是加载 Loading 另一个是类加载 Class L…

设备码解释

一、名词解释 Device ID&#xff1a;设备ID。 IMEI&#xff1a;&#xff08;International Mobile Equipment Identity&#xff09;国际移动设备标识的缩写。是由15位数字组成的“电子串号”&#xff0c;它与每台手机一一对应&#xff0c;每个IMEI在世界上都是唯一的。 MEID…

esp32 rust linux

官方文档&#xff1a;https://esp-rs.github.io/book/introduction.html 安装 rust curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh 工具 risc&#xff1a; rustup toolchain install nightly --component rust-src # nightly 支持 riscv或使用安装工具同时…

银河麒麟V10SP1-20200711的mate-indicators进程占用内存过高的解决办法

目录 一、监控异常 二、进程异常 三、解决方法 &#xff08;一&#xff09;第一步&#xff1a;先查看操作系统版本 &#xff08;二&#xff09;第二步&#xff1a;下载相应版本的补丁包 &#xff08;三&#xff09;第三步&#xff1a;升级补丁、重启系统 1. 升级步骤 2. …

如何在 Windchill PDMLink 中扩展字符串类型的全局属性的列长度

如何扩展&#xff08;自定义&#xff09;String类型全局属性的列长度存储&#xff1f; 如何扩展&#xff08;自定义&#xff09;String类型的IBA长度&#xff1f; IBA列最大长度是否受Oracle最大长度限制&#xff1f; 柱延伸是否有负面影响&#xff1f; String类型的全局属性/可…

浅谈安科瑞EMS能源管控平台建设的意义-安科瑞 蒋静

摘 要&#xff1a;能源消耗量大、能源运输供给不足、环境压力日趋增加、能耗双控等一系列问题一直困扰着钢铁冶金行业&#xff0c;制约着企业快速稳定健康发展。本文介绍的安科瑞EMS能源管控平台&#xff0c;采用自动化、信息化技术&#xff0c;实现从能源数据采集、过程监控、…

3 Tensorflow构建模型详解

上一篇&#xff1a;2 用TensorFlow构建一个简单的神经网络-CSDN博客 本篇目标是介绍如何构建一个简单的线性回归模型&#xff0c;要点如下&#xff1a; 了解神经网络原理构建模型的一般步骤模型重要参数介绍 1、神经网络概念 接上一篇&#xff0c;用tensorflow写了一个猜测西…

菜单管理中icon图标回显

<el-table-column prop"icon" label"图标" show-overflow-tooltip algin"center"><template v-slot"{ row }"><el-icon :class"row.icon"></el-icon></template></el-table-column>

跟我学C++中级篇——右值引用和万能引用

一、右值引用 在C11中出现了右值引用&#xff0c;想知道右值引用&#xff0c;就必须知道右值。在前面分析过左右和消亡值等类型&#xff08;见“左值和右值再谈”&#xff09;&#xff0c;其实右值就是为了废物利用&#xff0c;而既然利用的好&#xff0c;就有了和左值一样的引…