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动画(开启gpu加速)
Dec 23 HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
html5中的一些标签学习(心得)
Oct 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效率,提高php性能的一些方法
2011/03/24 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
学校七一活动方案
2014/01/19 职场文书
社区中秋节活动方案
2014/01/29 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
学校献爱心活动总结
2014/07/08 职场文书
企业年检委托书范本
2014/10/14 职场文书
财务务虚会发言材料
2014/10/20 职场文书
英文邀请函
2015/02/02 职场文书
2015年加油站工作总结
2015/05/13 职场文书
新人入职感言
2015/07/31 职场文书