以下笔记有待测试

————————————————————

<table style="table-layout:fixed">

<tr>

<td style='white-space:nowrap;overflow:hidden;text-overflow: ellipsis;'>

</td>

</tr>

</table>

HTML如何让table中的td内容过长显示为固定长度,多余部分用省略号代替

这个问题呢,是由于我们公司测试的部门测出来的,虽然说测试的内容本身就是个BUG,不过这个也让我学到了一个比较好的归类于布局的一个小技巧,就是将td标签中过长的内容只显示为这个td的width的长度,之后的便以省略号代替。

方式如下:

这个功能有一个前提,在table中必须设置style:

table-layout: fixed;

这条属性就是让table的内部布局固定大小。这个时候就用width属性调节td的长度。

之后在添加如下:

<style>

td {

white-space:nowrap;overflow:hidden;text-overflow: ellipsis;

}

</style>

属性描述

white-space:nowrap;规定段落中的文本不进行换行
overflow:hidden;关闭滚动条
text-overflow: ellipsis;溢出的文字显示为省略号

这个时候你会发现,就算变成了省略号,就会出现不知道内容完整的是什么?

所以这个时候可以考虑使用td的title属性,在title属性中设置内容为显示内容,这样只要光标停留在td处就可以显示全部的内容,如果觉得这个不够劲。可以考虑自己写一个mouseover事件,让内容全部显示,显示的方式是自动换行,如果不换行就会出现很难看的样式。

so:换行也需要table-layout: fixed;

在(IE浏览器)长串英文自动回行

方法1:同时加入word-wrap:break-word;

table{

table-layout:fixed;word-wrap:break-word;

}

最新文章

  1. 破解SQLServer for Linux预览版的3.5GB内存限制 (RHEL篇)
  2. pomelo 服务器开发常用术语
  3. socket编程在windows和linux下的区别
  4. ios-html-get/post差额,简而言之(MS)CheckST
  5. JAVA程序测试之Swing编程
  6. [UOJ]#33. 【UR #2】树上GCD
  7. 记一次webpack打包优化
  8. surging如何使用swagger 组件测试业务模块
  9. 不可不知的表达式树(1)Expression初探
  10. 【论文阅读】Wing Loss for Robust Facial Landmark Localisation with Convolutional Neural Networks
  11. html页面布局之table布局:
  12. git之sourceTree操作流程
  13. Spring框架学习09——基于AspectJ的AOP开发
  14. linux 后台运行命令
  15. Q:判断链表中是否存在环的相关问题
  16. sql语句精确匹配一个字符串
  17. Nginx配置整理
  18. thinkphp多表联合查询
  19. 更改控件中DrawableLeft图片的大小,图片与文字的距离
  20. Java基础—运算符(转载)

热门文章

  1. Java知多少(36)内部类及其实例化
  2. 详解Linux安装GCC
  3. Gradle 设置全局代理
  4. python的数据结构之栈
  5. 使用 vm 加载文件中的数据到变量里面
  6. WordOperate
  7. 洛谷P3952 时间复杂度【字符串】【模拟】
  8. STL 标准模板库
  9. .NET Core开发日志——视图与页面
  10. CodeForces 1099F - Cookies - [DFS+博弈+线段树]