CSS解决div行变块 ➕ CSS解决“table中的td文字溢出控制显示字数,显示省略号”的问题

CSS解决div行变块 ➕ CSS解决“table中的td文字溢出控制显示字数,显示省略号”的问题

  • 1. div变块级设置
    • 1.1 先看不设置的效果
    • 1.2 再看设置之后的效果
  • 2. 解决 table 中 td 内容过长问题
    • 2.1 CSS实现(文字溢出控制td显示字数,显示省略号)
      • 2.1.1 先看效果
      • 2.1.2 实现代码
      • 2.1.3 可能会遇到的问题
        • 2.1.3.1 解决text-overflow不生效的问题
        • 2.1.3.2 解决在table 设置每列等宽table-layout: fixed;后, td设置宽度无效
    • 2.2 鼠标放上去显示完整内容
      • 2.2.1 使用 title 属性(直接td上添加title属性)
      • 2.2.2 使用 title 属性(使用 js 添加title属性)
        • 2.2.2.1 直接 js 实现
        • 2.2.2.2 使用 jQuery 实现
        • 2.2.2.3 上面 js、jQuery 完整代码
      • 2.2.3 通过 td:hover
        • 2.2.3.1 换行展示
        • 2.2.3.2 不换行展示

1. div变块级设置

1.1 先看不设置的效果

  • 如下:
    在这里插入图片描述

1.2 再看设置之后的效果

  • 语句:
    style="display: flex;"
    
  • 效果
    在这里插入图片描述
  • 代码:
    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
    </head>
    <body><div style="display: flex;"><div style="background-color: aqua; width: 100px; margin: 0px 20px;">我的div1</div><div style="background-color: blueviolet; width: 100px;">我的div2</div></div>
    </body>
    </html>
    

2. 解决 table 中 td 内容过长问题

2.1 CSS实现(文字溢出控制td显示字数,显示省略号)

2.1.1 先看效果

  • 不加限制效果:
    在这里插入图片描述
  • 加上限制效果:
    在这里插入图片描述

2.1.2 实现代码

  • 核心代码如下:

        <style>table{background-color: cadetblue;height: 150px;width: 300px;/* 下面是核心代码 */table-layout:fixed;}th,td{border: 1px solid;text-align: center;/* 下面是核心代码 */word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}</style>
    
  • 完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{background-color: cadetblue;height: 150px;width: 300px;/* 下面是核心代码  如果不设置此属性,在table表格不生效*/table-layout:fixed;}th,td{border: 1px solid;text-align: center;/* 下面是核心代码 */word-break:keep-all;white-space:nowrap;  /* 不换行 */overflow:hidden;  /* 隐藏 */text-overflow:ellipsis;   /* 使用...代替 */}</style>
    </head>
    <body><table cellspacing="0"><thead><tr><th>姓名</th><th>年龄</th><th>性别</th><th>粉丝</th></tr></thead><tbody><tr><td style="width: 200px;"><div>小李fffffffffffffffff</div></td><td>20</td><td></td><td>天津粉丝<span class="my_hover_number">350</span></td></tr><tr><td>小王呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜</td><td>28</td><td></td><td>全国粉丝<div class="jiu_jiu">999+</div></td></tr><tr><td><div style="display: flex;">反反</div><a>小赵ddddddddddddddddgdagagaafg</a></td><td>31</td><td></td><td>北京粉丝</td></tr></tbody></table></body>
    </html>
    

2.1.3 可能会遇到的问题

2.1.3.1 解决text-overflow不生效的问题
  • 第一:先检查下面代码是否都有设置,要搭配使用,否则不生效
    table{/* 下面是核心代码 */table-layout:fixed;
    }
    th,td{/* 下面是核心代码 */word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    
  • 第二:如果样式代码没问题,看td里是否有些div,如果要控制的字体在div里,也不生效,写的span标签里可以生效或者其他标签。
2.1.3.2 解决在table 设置每列等宽table-layout: fixed;后, td设置宽度无效
  • 我这里设置td的宽度是可以生效的,但是有的无论怎么设置都不生效,碰到这种情况,别想太多,直接按下面的解决就行,解决代码如下(col里的宽度自己调整):
    <col style="width: 90px;"/>
    <col>
    <col/>
    <col style="width: 10px"/>
    
    在这里插入图片描述

2.2 鼠标放上去显示完整内容

2.2.1 使用 title 属性(直接td上添加title属性)

  • 使用title属性解决,如下:
    <td title="小王呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜">小王呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜
    </td>
    
    在这里插入图片描述

2.2.2 使用 title 属性(使用 js 添加title属性)

2.2.2.1 直接 js 实现
  • 效果如下:
    在这里插入图片描述

  • 代码如下:

    //js给所有td加上悬浮显示(title)
    function addTitleJs(){var tbody = document.getElementById("myTbody");var rows = tbody.rows;for(var i =0;i<rows.length;i++){for(var j = 0; j<rows[i].cells.length; j++ ){    // 遍历该行的 td// alert("第"+(i+1)+"行,第"+(j+1)+"个td的值:"+rows[i].cells[j].innerHTML+"。");           // 输出每个td的内容var td = rows[i].cells[j];var tdText = td.innerText;rows[i].cells[j].setAttribute("title",tdText); }}
    }
    
    <tbody id="myTbody"><tr><td onmouseover="addTitleJs()">小李高三高三高三高三高三fffffffffffffffff</td></tr>
    </tbody>
    
2.2.2.2 使用 jQuery 实现
  • 效果如下:
    在这里插入图片描述
  • 实现代码如下:
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    
    <script>//jquery给所有td加上悬浮显示(title)function addTitleJquery() {$("#myTbody tr td").each(function () {$(this).attr("title", $(this).text());// $(this).css("cursor", 'pointer');});}
    </script>
    
    <tbody id="myTbody"><tr><td onmouseover="addTitleJquery()">小李高三高三高三高三高三fffffffffffffffff</td></tr>
    </tbody>
    
2.2.2.3 上面 js、jQuery 完整代码
  • 如下:

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><style>table{background-color: cadetblue;height: 150px;width: 300px;/* 下面是核心代码 */table-layout:fixed;}th,td{border: 1px solid;text-align: center;/* 下面是核心代码 */word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}/* 鼠标放上去时 单元格设置背景色 */td:hover{background-color: blueviolet;}</style><script>//js给所有td加上悬浮显示(title)function addTitleJs(){var tbody = document.getElementById("myTbody");var rows = tbody.rows;for(var i =0;i<rows.length;i++){for(var j = 0; j<rows[i].cells.length; j++ ){    // 遍历该行的 td// alert("第"+(i+1)+"行,第"+(j+1)+"个td的值:"+rows[i].cells[j].innerHTML+"。");           // 输出每个td的内容var td = rows[i].cells[j];var tdText = td.innerText;rows[i].cells[j].setAttribute("title",tdText); }}}//jquery给所有td加上悬浮显示(title)function addTitleJquery() {$("#myTbody tr td").each(function () {$(this).attr("title", $(this).text());// $(this).css("cursor", 'pointer');});}</script>
    </head>
    <body><table cellspacing="0"><thead><tr><th>姓名</th><th>年龄</th><th>性别</th><th>粉丝</th></tr></thead><col style="width: 90px;"/><col><col/><col style="width: 10px"/><tbody id="myTbody"><tr><td onmouseover="addTitleJquery()">小李高三高三高三高三高三fffffffffffffffff</td><td>20</td><td></td><td>天津粉丝</td></tr><tr><td>小王呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜</td><td>28</td><td></td><td>全国粉丝</td></tr><tr><td>小赵ddddddddddddddddgdagagaafg</td><td>31</td><td></td><td>北京粉丝</td></tr></tbody></table></body>
    </html>
    

2.2.3 通过 td:hover

2.2.3.1 换行展示
  • 即:鼠标放上去之后换行展示,效果如下:
    在这里插入图片描述

  • 代码实现如下:

    <style>table{background-color: cadetblue;height: 150px;width: 300px;/* 下面是核心代码 */table-layout:fixed;}th,td{border: 1px solid;text-align: center;/* 下面是核心代码 *//* word-break:keep-all; */white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}table td:hover{ white-space:normal; overflow:auto;}</style>
    
2.2.3.2 不换行展示
  • 效果如下(感觉还是title好些):
    在这里插入图片描述

  • 代码如下(在上面3点(…)代码保持不变的基础上优化):

    <td>小李打发发噶发发地方fffffffffffffffff<span class="td_tips">小李打发发噶发发地方fffffffffffffffff</span>
    </td>
    
    <style>table{background-color: cadetblue;height: 150px;width: 300px;/* 下面是核心代码 */table-layout:fixed;}th,td{border: 1px solid;text-align: center;/* 下面是核心代码 */word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}td{position:relative; z-index:2;}td:hover{z-index:5;overflow: visible;}td:hover .td_tips  { display: block;position: absolute;top: 10px; background-color: rgb(98, 2, 2);color: royalblue;}
    </style>
    

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

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

相关文章

手机转接器实现原理,低成本方案讲解

USB-C PD协议里&#xff0c;SRC和SNK双方之间通过CC通信来协商请求确定充电功率及数据传输速率。当个设备需要充电时&#xff0c;它会发送消息去给适配器请求充电&#xff0c;此时充电器会回应设备的请求&#xff0c;并告知其可提供的档位功率&#xff0c;设备端会根据适配器端…

英伟达发布 Windows 版 TensorRT-LLM 库

导读英伟达发布了 Windows 版本的 TensorRT-LLM 库&#xff0c;称其将大模型在 RTX 上的运行速度提升 4 倍。 GeForce RTX 和 NVIDIA RTX GPU 配备了名为 Tensor Core 的专用 AI 处理器&#xff0c;正在为超过 1 亿台 Windows PC 和工作站带来原生生成式 AI 的强大功能。 Tens…

大模型在代码缺陷检测领域的实践

静态代码扫描(SA)能快速识别代码缺陷&#xff0c;如空指针访问、数组越界等&#xff0c;以较高ROI保障质量及提升交付效率。当前扫描能力主要依赖人工经验生成规则&#xff0c;泛化能力弱且迭代滞后&#xff0c;导致漏出。本文提出基于代码知识图谱解决给机器学什么的问题&…

大数据Doris(十六):Doris表的数据划分

文章目录 Doris表的数据划分 一、Partition 二、 Bucket 三、PROPERTIES 四、 ENGINE Doris表的数据划分 Doris支持单分区和复合分

【深度学习】快速制作图像标签数据集以及训练

快速制作图像标签数据集以及训练 制作DataSet 先从网络收集十张图片 每种十张 定义dataSet和dataloader import glob import torch from torch.utils import data from PIL import Image import numpy as np from torchvision import transforms import matplotlib.pyplot…

CAD操作技巧学习总结

1&#xff0c;已知一个圆&#xff0c;画该圆切线。 L命令画直线&#xff0c;再tan指令确定第一个点为切点&#xff0c;依次输入&#xff08;长度&#xff09;<&#xff08;角度&#xff09;&#xff0c;如55<-45,负号为顺时针。 2&#xff0c;中心点偏移。 O命令偏移&am…

go语言 | grpc原理介绍(三)

了解 gRPC 通信模式中的消息流 gRPC 支持四种通信模式&#xff0c;分别是简单 RPC、服务端流式 RPC、客户端流式 RPC 和双向流式 RPC。 简单 RPC 在gRPC中&#xff0c;一个简单的RPC调用遵循请求-响应模型&#xff0c;通常涉及以下几个关键步骤和组件&#xff1a; 请求头&a…

鸿蒙LiteOs读源码教程+向LiteOS中添加一个简单的基于线程运行时的短作业优先调度策略

一、鸿蒙Liteos读源码教程 鸿蒙的源码是放在openharmony文件夹下&#xff0c;openharmony下的kernel文件夹存放操作系统内核的相关代码和实现。 内核是操作系统的核心部分&#xff0c;所以像负责&#xff1a;资源管理、任务调度、内存管理、设备驱动、进程通信的源码都可以在…

升级 MacOS 系统后,playCover 内游戏打不开了如何解决

我们有些小伙伴在升级了 macOS 系统后大概率会遇到之前能够正常使用的 playCover 突然游戏打不开了&#xff0c;最近 mac 刚刚正式推出了 MacOS 14.1 ,导致很多用户打开游戏会闪退&#xff0c;我们其实只需要更新一下 playCover 就可以解决 playCover 正式版更新会比较慢所以我…

基于生成对抗网络的照片上色动态算法设计与实现 - 深度学习 opencv python 计算机竞赛

文章目录 1 前言1 课题背景2 GAN(生成对抗网络)2.1 简介2.2 基本原理 3 DeOldify 框架4 First Order Motion Model5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于生成对抗网络的照片上色动态算法设计与实现 该项目较为新颖&am…

【rust/esp32】初识slint ui框架并在st7789 lcd上显示

文章目录 说在前面关于slint关于no-std关于dma准备工作相关依赖代码结果参考 说在前面 esp32版本&#xff1a;s3运行环境&#xff1a;no-std开发环境&#xff1a;wsl2LCD模块&#xff1a;ST7789V2 240*280 LCDSlint版本&#xff1a;master分支github地址&#xff1a;这里 关于s…

【音视频 | opus】opus编码的Ogg封装文件详解

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

汇编语言(举个栗子)

汇编语言&#xff08;Assembly Language&#xff09;是任何一种用于电子计算机、微处理器、微控制器或其他可编程器件的低级语言&#xff0c;亦称为符号语言。在汇编语言中&#xff0c;用助记符代替机器指令的操作码&#xff0c;用地址符号或标号代替指令或操作数的地址。在不同…

基于51单片机土壤湿度检测及自动浇花系统仿真(带时间显示)

wx供重浩&#xff1a;创享日记 对话框发送&#xff1a;单片机浇花 获取完整源码源文件仿真源文件原理图源文件论文报告等 单片机土壤湿度检测及自动浇花系统仿真&#xff08;带时间显示&#xff09; 具体功能&#xff1a; &#xff08;1&#xff09;液晶第一行显示实际湿度&am…

信道编码译码及MATLAB仿真

文章目录 前言一、什么是信道编码&#xff1f;二、信道编码的基本逻辑—冗余数据1、奇偶检验码2、重复码 三、编码率四、4G 和 5G 的信道编码1、卷积码2、维特比译码&#xff08;Viterbi&#xff09;—— 概率译码3、LTE 的咬尾卷积码4、LTE 的 turbo 码 五、MATLAB 仿真1、plo…

0008Java安卓程序设计-ssm基于Android平台的健康管理系统

文章目录 **摘要**目录系统实现开发环境 编程技术交流、源码分享、模板分享、网课教程 &#x1f427;裙&#xff1a;776871563 摘要 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,…

Git 的基本操作 ——命令行

Git 的工作流程 详解如下&#xff1a; 本地仓库&#xff1a;是在开发人员自己电脑上的Git仓库,存放我们的代码(.git 隐藏文件夹就是我们的本地仓库) 远程仓库&#xff1a;是在远程服务器上的Git仓库,存放代码(可以是github.com或者gitee.com 上的仓库,或者自己该公司的服务器…

【ElasticSearch系列-05】SpringBoot整合elasticSearch

ElasticSearch系列整体栏目 内容链接地址【一】ElasticSearch下载和安装https://zhenghuisheng.blog.csdn.net/article/details/129260827【二】ElasticSearch概念和基本操作https://blog.csdn.net/zhenghuishengq/article/details/134121631【三】ElasticSearch的高级查询Quer…

PTA:前序序列创建二叉树

前序序列创建二叉树 题目输入格式输出格式输入样例&#xff08;及其对应的二叉树&#xff09;输出样例 代码 题目 编一个程序&#xff0c;读入用户输入的一串先序遍历字符串&#xff0c;根据此字符串建立一个二叉树&#xff08;以二叉链表存储&#xff09;。 例如如下的先序遍…

SpringCloudAlibaba - 项目完整搭建(Nacos + OpenFeign + Getway + Sentinel)

目录 一、SpringCloudAlibaba 项目完整搭建 1.1、初始化项目 1.1.1、创建工程 1.1.2、配置父工程的 pom.xml 1.1.3、创建子模块 1.2、user 微服务 1.2.1、配置 pom.xml 1.2.2、创建 application.yml 配置文件 1.2.3、创建启动类 1.2.4、测试 1.3、product 微服务 1…