广告位联系
返回顶部
分享到

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

css 来源:互联网 作者:佚名 发布时间:2023-01-01 09:10:07 人浏览
摘要

核心代码 1 2 3 4 5 6 7 8 9 10 11 table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */ } td{ width:100%; word-break:keep-all;/* 不换行 */ white-space:nowrap;/*

核心代码

1

2

3

4

5

6

7

8

9

10

11

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表格想要设置文本溢出操作可按照如下方法

1

2

3

4

table{

width: 100%;

table-layout:fixed;

}

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

1

2

3

4

5

6

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设置方法

1

2

3

4

5

6

7

8

9

10

$(".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进行操作文本内容会超出表格,不换行。


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • table设置超出部分隐藏,鼠标移上去显示全部内容
    table内容超出宽度时隐藏并显示省略标记 HTML中,一个表格,要达到二个条件: 1、内容多了不自动换行; 2、固定单元格宽度。如果内容超出
  • table不让td文字溢出操作方法
    核心代码 1 2 3 4 5 6 7 8 9 10 11 table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */ } td{ width:100%
  • CSS使用SVG实现动态分布的圆环发散路径动画

    CSS使用SVG实现动态分布的圆环发散路径动画
    这个需求也是最近的大屏项目里面需要用到的一个效果,大致需求是实现一个圆形范围内 由一个不确定坐标的点 向圆周进行曲线发散 的效
  • CSS3浏览器兼容的介绍

    CSS3浏览器兼容的介绍
    一、浏览器兼容 1.1、概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核
  • CSS元素定位之通过元素的标签或者元素的id、cl

    CSS元素定位之通过元素的标签或者元素的id、cl
    大部分人在使用selenium定位元素时,用的是xpath元素定位方式,因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观,更好
  • 微信小程序纯CSS实现无限弹幕滚动效果

    微信小程序纯CSS实现无限弹幕滚动效果
    啥也不说,先上效果图 实现背景 产品:我们需要一个弹幕滚动效果,类似于微博热搜那种实时评论,但是我们的数据是固定的20条,你让他
  • 使用CSS构建强大且酷炫的粒子动画效果

    使用CSS构建强大且酷炫的粒子动画效果
    粒子动画,顾名思义,就是页面上存在大量的粒子构建而成的动画。传统的粒子动画主要由 Canvas、WebGL 实现。 当然,不使用 HTML + CSS 的主要
  • flex:1的详细介绍

    flex:1的详细介绍
    简单的来说一下在别人问你这个问题的时候怎么来回答它 前端新人,如有错误求大佬指出~求教???? 情景复现 大佬提问:你知道flex: 1;的更深
  • 新的CSS伪类函数 :is 和 :where()示例介绍

    新的CSS伪类函数 :is 和 :where()示例介绍
    在编写 CSS 时,有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如,如果您想对标题中的 b 标签进行颜色调整,我
  • 纯CSS打字动画的实现方法

    纯CSS打字动画的实现方法
    在一些技术网站中,经常会看到这样一种展示效果:逐个显示一段文本中的字符,模拟出一种打字的效果。通过这种方式可以显著地提升网
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计