博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
table 中 文字长度大于td宽度,导致文字换行 解决方案
阅读量:6973 次
发布时间:2019-06-27

本文共 1264 字,大约阅读时间需要 4 分钟。

1.

表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况)。换行后的表格显得乱糟糟,不太好看,我不喜欢这样的换行。当然可以通过对每列td都设置宽度,那样太麻烦了,并且有时没法预计td中的文字会有多长,没法给固定宽度。

为了让表格里文字不换行(预计也不会太长的字符串),可以给表格里td添加一个nowrap属性,如 <td nowrap>文字内容</td> 这样。
但是如果给每个td都加上nowrap属性,貌似太繁琐并且占用空间和流量。于是乎,我找css的实现方法,不擅长此术,尝试了n多个样式后,找到white-space: nowrap; 貌似跟直接给td加nowrap差不多,那么就可以像下面这样定义样式,即可实现td里不换行,字符串长了就撑宽表格宽度。

    test        
我是乱七八糟的字符串 悟空的博客 www.7es.cn
我是乱七八糟的字 我很长哦 悟空的博客

 

2.

.class1{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}

 

text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。

我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。

    test        
测试 测试测试测试测试测试测试测试测试测试测试测试123123
td1 td2

 

参:

1.

2.

3.

转载地址:http://cpesl.baihongyu.com/

你可能感兴趣的文章
二十名工资最高的科技高管 仅有一家是纯安全公司
查看>>
《 嵌入式系统设计与实践》一一1.1 编译器、编程语言以及面向对象编程
查看>>
TensorFlow教程之完整教程 2.10 偏微分方程
查看>>
它是中国人口最小的城市,却美得像个意外!
查看>>
加码远程医疗 视频通信公司Vidyo获得医疗企业巨额投资
查看>>
高通输了官司,需返还黑莓8.15亿专利费
查看>>
Facebook盯上修图应用Prisma 展示类似应用
查看>>
来Snapchat和QQ看看,什么叫年轻人的大生意
查看>>
硅谷基金为什么投资iPhone黑客的初创企业
查看>>
高通要赔韩国59亿 国产企业能否借机争取自身利益
查看>>
Dell'Oro指出2017年WDM市场将维持增长
查看>>
移动医疗最严监管来袭:大批在线医疗公司将死
查看>>
宣武医院:让物联网为智慧医疗添翼
查看>>
城市更智慧生活更便捷
查看>>
新型病毒DoubleAgent曝光:攻击计算机前先入侵防病毒软件
查看>>
这款Chrome扩展:能够提升空中WiFi的页面打开速度
查看>>
服务提供商收入下降12% 思科降低Q2财政预期
查看>>
四川信息安全产业今年产值将达400亿元
查看>>
智能安防发展面面观
查看>>
Office Mobile预览版更新17.7369版:Word文档可保存为PDF
查看>>