[Web 前端] td长度固定，内容过长，超过部分用省略号代替
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样式：
table-layout: fixed 由于table-layout的默认值是auto，即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了，fixed一下就好了。（注意：此样式是关键）
white-space: nowrap 是为了保证无论单元格（TD）中文本内容有多少，都不会自动换行，此时多余的内容会在水平方向撑破单元格。
overflow: hidden 隐藏超出单元格的部分。
text-overflow: ellipsis 将被隐藏的那部分用省略号代替。
兼容性：
Internet Explorer 6, 7, 8, 9及以上版本
FireFox 最新版
Chrome 最新版
[Web 前端] td长度固定，内容过长，超过部分用省略号代替的更多相关文章
- Web 前端性能优化相关内容解析
Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...
- Web 前端性能优化相关内容解析[转]
Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...
- table td中的内容过长，显示为固定长度，多余部分用省略号显示
简单描述:table数据过长,结果顶到下一格,影响了数据的查看 解决办法: 给table 加上style属性 另外 给td加上style标签修饰 <table class="tab ...
- html 让table表格中的td单元格内容过长显示为固定长度，多余部分用省略号代替?
<th class="wrap">商品名</th> .wrap{ width: 150px; //设置需要固定的宽度 white-space: nowrap ...
- Web前端开发最佳实践（1）：前端开发概述
引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...
- 初学者应该怎么学习前端？web前端的发展路线大剖析！
写在最前: 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用 ...
- 对于一个WEB前端初学者，学前端应该注意，有什么技巧
web前端经验总结需要注意的地方和技巧如下: 1.编程思维 学习web前端开发核心在于一个“编程思维”,因为每段代码都不一样,都需要分别去看,所以只要你掌握了学习web前端的编程思维,那么写程序对于你 ...
- 大专生自学web前端到找到工作的前前后后
先做个自我介绍,我13年考上一所很烂专科民办的学校,学的是生物专业,具体的学校名称我就不说出来献丑了.13年我就辍学了,我在那样的学校,一年学费要1万多,但是根本没有人学习,我实在看不到希望,我就退学 ...
- 大专生自学web前端前前后后
先做个自我介绍,我13年考上一所很烂专科民办的学校,学的是生物专业,具体的学校名称我就不说出来献丑了.13年我就辍学了,我在那样的学校,一年学费要1万多,但是根本没有人学习,我实在看不到希望,我就退学 ...
随机推荐
- js中call与apply用法
call和apply,它们的作用都是将函数绑定到另外一个对象上去运行 两者的格式和参数定义: call( thisArg [,arg1,arg2,… ] ); // 参数列表,arg1,arg2,.. ...
- springboot 解决 woff2、ttf 跨域无法解析问题
@Configuration public class CORSConfiguration extends WebMvcConfigurerAdapter { @Override public voi ...
- HttpClient-----待补充
1.简介 HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 JDK 的 java.net 包中 ...
- 033 Java Spark的编程
1.Java SparkCore编程 入口是:JavaSparkContext 基本的RDD是:JavaRDD 其他常用RDD: JavaPairRDD JavaRDD和JavaPairRDD转换: ...
- 【LeetCode刷题】SQL-Second Highest Salary 及扩展以及Oracle中的用法
转载于:https://www.cnblogs.com/contixue/p/7057025.html Write a SQL query to get the second highest sala ...
- SQLTransientConnectionException: HikariPool-1 - Connection is not available, request timed out after 30001ms.
SQLTransientConnectionException: HikariPool-1 - Connection is not available, request timed out after ...
- usb3.0 monitor is already started
用360 开机加速里找到这个程序,把它从开机启动中删除掉就好.
- Django插件之Django-hosts的应用
Django插件之Django-hosts的应用 前因 网站移动端的域名是m.example.com,最开始只是在nginx做了映射,将m.example.com映射到example.com/m/下面 ...
- 20172319 2018.10.12《Java程序设计教程》第6周课堂实践（补写博客）
20172319 2018.10.12 <Java程序设计教程>第6周课堂测验 课程:<程序设计与数据结构> 班级:1723 学生:唐才铭 学号:20172319 指导老师:王 ...
- Codeforces Round #312 (Div. 2) E. A Simple Task 线段树
E. A Simple Task 题目连接: http://www.codeforces.com/contest/558/problem/E Description This task is very ...