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——齿轮转动关键代码
May 02 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
调整PHP的性能
2013/10/30 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
用Python设计一个经典小游戏
2017/05/15 Python
python实现定时发送qq消息
2019/01/18 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
部队领导证婚词
2014/01/12 职场文书
高一物理教学反思
2014/01/24 职场文书
会议主持词
2014/03/17 职场文书
高三学生评语大全
2014/04/25 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书