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 弹性布局快速入门
Jun 06 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
CSS3实现swap交换动画
Jan 19 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
css3 filter属性的使用简介
Mar 31 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编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
PHP 万年历实现代码
2012/10/18 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
个人近期表现材料
2014/02/11 职场文书
联片教研活动总结
2014/07/01 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
办公室禁烟通知
2015/04/23 职场文书
公司更名通知函
2015/04/24 职场文书
实习介绍信范文
2015/05/05 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis