table不让td文字溢出操作方法


Posted in HTML / CSS onDecember 24, 2022

核心代码

table{  
    width:100px;  
    table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */  
}  
td{  
    width:100%;  
    word-break:keep-all;/* 不换行 */     
    white-space:nowrap;/* 不换行 */  
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */  
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用*/  
}

补充

 1.table表格想要设置文本溢出操作可按照如下方法

table{
width: 100%;
table-layout:fixed;
}

注意:table必须设置table-layout:fixed;属性,文本溢出设置才能生效;

td{
width:300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

其中:table-layout取值为:
automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。
inherit 规定应该从父元素继承 table-layout 属性的值。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit"。

text-overflow取值为

clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
所有主流浏览器都支持 text-overflow 属性。
white-space取值为
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的

标签

nowrap     文本不会换行,文本会在在同一行上继续,直到遇到 

 标签为止。

pre-wrap    保留空白符序列,但是正常地进行换行。

pre-line   合并空白符序列,但是保留换行符。

inherit   规定应该从父元素继承 white-space 属性的值。  

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit"。  

注意:如果表格中有th和td标签,必须都设置宽度,如果给th设置宽度,td宽度不设置,那么设置table-layout:fixed;文本溢出生效后,td宽度将失效。

2.设置鼠标移动到上面显示全部内容,

(1)非table表格可直接使用:hover进行相应设置

(2)table表格利用js设置方法

$(".list").delegate(“td","mouseover",function(){
        $(“table").css(“table-layout","automatic");
        $(this).css({“white-space":"pre-wrap","overflow":"visible"});
    });  

$(“.list").delegate(“td","mouseout",function(){
        $(“table").css(“table-layout","fixed");
        $(this).css({“text-overflow":"ellipsis","white-space":"nowrap","overflow":"hidden"});

    });

table表格中重点为设置table{table-layout:automatic},用hover进行操作文本内容会超出表格,不换行。

到此这篇关于table不让td文字溢出操作方法的文章就介绍到这了,更多相关td内容溢出内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
使用css3绘制出各种几何图形
Aug 17 HTML / CSS
CSS3字体效果的设置方法小结
Jun 13 HTML / CSS
手把手教你用纯css3实现轮播图效果实例
May 04 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 #HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 #HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 #HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 #HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 #HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 #HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 #HTML / CSS
You might like
php 抽象类的简单应用
2011/09/06 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
PHP重定向的3种方式
2013/03/07 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
jquery中append()与appendto()用法分析
2014/11/14 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python正则中最短匹配实现代码
2018/01/16 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
python reverse反转部分数组的实例
2018/12/13 Python
Python判断有效的数独算法示例
2019/02/23 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
介绍一下Java中的Class类
2015/04/10 面试题
师范生的个人求职信范文
2014/01/04 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
留学推荐信英文范文
2015/03/26 职场文书
2015年班组长工作总结
2015/04/10 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
恰同学少年观后感
2015/06/08 职场文书