找回密码
 注册账号

QQ登录

只需一步,快速开始

《泰拉瑞亚下载-1.4.2.3版》 泰拉瑞亚服务器 - MOD模组下载

入驻泰拉战网 新手指引 - 升级 - 师徒

泰拉瑞亚合成表 泰拉卡牌 - 泰拉江湖 - 泰拉刺客

联系泰拉开发组👈进入 积分市场 - 房产交易 - 水晶获取

查看: 5252|回复: 0

[CSS] css解决td单元格内文字溢出

[复制链接]

506

主题

18

回帖

5

广播

论坛版主

积分
260
泰拉
22
水晶
1
铜钥匙
0
银钥匙
0
金钥匙
0

【江湖新秀】【宝剑回鞘】【泰拉达人】【奥运选手】

发表于 2021-8-15 22:52:29 | 显示全部楼层 |阅读模式
td单元格内显示的文字太长时,总是会自动分行,把表格撑高了,或者密密麻麻的一片,总是不好看~

俺一开始的做法是用php的mb_substr()来截取定长的字符串,但是,因为中英文字节的差异,比如,10个中文字符就比10个英文字符要长得多,在网页上显示起来就忽长忽短,无法对齐,很不美观~

~解决办法~

第一步:<table>标签加样式:table-layout:fixed;(一定要加,否则下面定义的td的样式都不起作用了)

第二步:<td>加样式:overflow:hidden;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;

~成功解决~

===================补充===================

遇到一种情况,使用上述方法,在IE10、IE9、IE8、firefox、opera下都可以隐藏超出的文字,但是在IE7和IE6下就不能隐藏,显示了密密麻麻的几行文字(有标点的中文),几经搜索和尝试,找到两种解决方法:一是在td和文字之间套多一层div。二是td的宽度设置不用确定的数字,而是用百分比。


获得 花仙子卡 一张

卡片说明:君山 遇到 [斯文的小言] 被赠与 1 铜钥匙.

卡片效果:获得 1 铜钥匙

您需要登录后才可以回帖 登录 | 注册账号

本版积分规则

QQ|友链申请|Archiver|手机版|小黑屋|游芯沙盒 ( 陕ICP备11006283号-1 )

GMT+8, 2024-12-21 23:41 , Processed in 0.101188 second(s), 35 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表