cp from : https://blog.csdn.net/bsh_csn/article/details/51829103

html的table表格中td长度固定,当内容过长时,超过部分用省略号代替. 具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.mytable {
table-layout: fixed;
width: 98% border:0px;
margin: 0px;
} .mytable tr td {
text-overflow: ellipsis; /* for IE */
-moz-text-overflow: ellipsis; /* for Firefox,mozilla */
overflow: hidden;
white-space: nowrap;
border: 1px solid;
text-align: left
}
</style>
</head>
<body>
<table width="500px" class="mytable">
<tr>
<td width="20%">测试</td>
<td width="80%">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试123123</td>
</tr>
</table>
</body>
</html>

  

table的width一定要设置, 不然会出现文字太多时变形的情况.

注释: 
原理: 
本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式:

  1. table-layout: fixed 由于table-layout的默认值是auto,即table的宽高将取决于其内容的多寡,如果内容的体积无法估测,那么最终表格的呈现形式也无法保证了,fixed一下就好了。(注意:此样式是关键)

  2. white-space: nowrap 是为了保证无论单元格(TD)中文本内容有多少,都不会自动换行,此时多余的内容会在水平方向撑破单元格。

  3. overflow: hidden 隐藏超出单元格的部分。

  4. text-overflow: ellipsis 将被隐藏的那部分用省略号代替。

兼容性: 
Internet Explorer 6, 7, 8, 9及以上版本

FireFox 最新版

Chrome 最新版

 

[Web 前端] td长度固定,内容过长,超过部分用省略号代替的更多相关文章

  1. Web 前端性能优化相关内容解析

    Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...

  2. Web 前端性能优化相关内容解析[转]

    Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...

  3. table td中的内容过长,显示为固定长度,多余部分用省略号显示

    简单描述:table数据过长,结果顶到下一格,影响了数据的查看 解决办法: 给table 加上style属性   另外 给td加上style标签修饰 <table class="tab ...

  4. html 让table表格中的td单元格内容过长显示为固定长度,多余部分用省略号代替?

    <th class="wrap">商品名</th> .wrap{ width: 150px; //设置需要固定的宽度 white-space: nowrap ...

  5. Web前端开发最佳实践(1):前端开发概述

    引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...

  6. 初学者应该怎么学习前端?web前端的发展路线大剖析!

    写在最前: 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用 ...

  7. 对于一个WEB前端初学者,学前端应该注意,有什么技巧

    web前端经验总结需要注意的地方和技巧如下: 1.编程思维 学习web前端开发核心在于一个“编程思维”,因为每段代码都不一样,都需要分别去看,所以只要你掌握了学习web前端的编程思维,那么写程序对于你 ...

  8. 大专生自学web前端到找到工作的前前后后

    先做个自我介绍,我13年考上一所很烂专科民办的学校,学的是生物专业,具体的学校名称我就不说出来献丑了.13年我就辍学了,我在那样的学校,一年学费要1万多,但是根本没有人学习,我实在看不到希望,我就退学 ...

  9. 大专生自学web前端前前后后

    先做个自我介绍,我13年考上一所很烂专科民办的学校,学的是生物专业,具体的学校名称我就不说出来献丑了.13年我就辍学了,我在那样的学校,一年学费要1万多,但是根本没有人学习,我实在看不到希望,我就退学 ...

随机推荐

  1. 【LOJ】#2531. 「CQOI2018」破解 D-H 协议

    题解 BSGS直接解出a和b来即可 代码 #include <bits/stdc++.h> #define fi first #define se second #define pii p ...

  2. 001.SSH配置文件

    一 ssh配置文件路径 1.1 ssh客户端配置文件: 路径:/etc/ssh/ssh_config 1.2 ssh服务端配置文件: 路径:/etc/ssh/sshd_config 二 服务器端常用配 ...

  3. Linux下多节点SSH无密码互联实现

    需求:有3个主机192.168.0.191.192.168.0.192.192.168.0.193,需要实现无密码ssh互联访问 我使用的是root用户进行操作的: 1.每个节点分别检查是否安装ope ...

  4. 模拟POST、Get 请求的工具----APIpost(中文版POSTMAN)

    模拟POST.Get 请求的工具----APIpost(中文版POSTMAN) 快速生成.一键导出api文档 在线模拟调试,结果实时返回 模拟登录后请求API 支持团队协作 官网:https://ww ...

  5. ApiPost自动化测试基础之:流程测试

    我们在<ApiPost自动化测试基础之:接口参数依赖的情景处理>和<ApiPost自动化测试基础之:如何使用测试校验(测试用例)?>分别讲解了ApiPost自动化测试的基础知识 ...

  6. curl请求指定host ip(指定域名解析的内网某ip)

    域名www.test.com解析内部多台ip $httpHeader = array('Host: www.test.com');$url = "10.17.2.245/xxx/xxx/t. ...

  7. KVM和QEMU简介

    KVM/QEMU简介 KVM虚拟机是基于linux内核虚拟化,自linux2.6.20之后就集成在linux的各个主要发行版本中.它使用linux自身的调度器进行管理,所以相对于xen,其核心源码很少 ...

  8. mysql分页查询优化(索引延迟关联)

    对于web后台报表导出是一种常见的功能点,实际对应服务后端即数据库的排序分页查询.如下示例为公司商户积分报表导出其中一个sql ,当大批量的导出请求进入时候,mysql的cpu急剧上升瞬间有拖垮库的风 ...

  9. 12174 - Shuffle

    这道题能够用"滑动窗体"的思想来做,假想一个滑动的窗体,这个窗体的大小是s.划过一个大小为n的区域,可是由于s可能比n大,所以我们最好还是不去考虑s和n的大小,直接开出一个足够大的 ...

  10. git 拉取和获取 pull 和 fetch 区别

    使用Git  直接提交的话   直接 push 获取最新版本  有两种  拉取 和 获取 pull 和 fetch git  pull     从远程拉取最新版本 到本地  自动合并 merge   ...