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. js跨越请求的2中实现 JSONP /后端接口设置运行跨越header

    由于浏览器同源策略,a域名的js向b域名ajax请求会被禁止.JS实现跨越访问接口有2中办法. 1.后端接口设置允许跨越的header头. //header('Access-Control-Allow ...

  2. matlab中等间距坐标距离表示不等间距数据值，以及延伸

    1.问题 平时只是用了一下plot的简单画图. x轴或者y轴的大小比例都是按照系统自动的生成. 但是如果出现巨大的比例的时候,如何保证在另一个轴上可以同等机会展示结果呢? 2.程序 这里是自己书写的程 ...

  3. oj提交时常见错误归纳

    Presentation Error: 常见的PE错误应该有以下的几种情况: 每行输出之后有空行 每两行输出之间有空行 一行中,每个输出数字(或字符串,等)之间有空格 一行中,每个输出数字(或字符串, ...

  4. 008.KVM-VNC管理

    一 VNC管理 1.1 修改配置 [root@kvm-host ~]# vi /etc/libvirt/qemu.conf …… vnc_listen = "0.0.0.0" 说明 ...

  5. C#并行编程（4）：基于任务的并行

    C#中的任务Task 在C#编程中,实现并行可以直接使用线程,但使用起来很繁琐:也可以使用线程池,线程池很大程度上简化了线程的使用,但是也有着一些局限,比如我们不知道作业什么时候完成,也取不到作业的返 ...

  6. Oracle数据库游标,序列,存储过程,存储函数,触发器

    游标的概念:     游标是SQL的一个内存工作区,由系统或用户以变量的形式定义.游标的作用就是用于临时存储从数据库中提取的数据块.在某些情况下,需要把数据从存放在磁盘的表中调到计算机内存中进行处理, ...

  7. 慎重使用volatile关键字

    volatile关键字相信了解Java多线程的读者都很清楚它的作用.volatile关键字用于声明简单类型变量,如int.float.boolean等数据类型.如果这些简单数据类型声明为volatil ...

  8. strlen()和mb_strlen()

    换行需要用双引号,单引号只会输出字符. strlen()返回字符串所占的字节数,对于utf8编码的中文,一个汉字占三个字节. mb_strlen()返回字符个数,如果不写第二个参数,就会使用内部编码, ...

  9. BZOJ.3139.[HNOI2013]比赛(搜索 Hash)

    题目链接 不会搜索了.. DFS()中两个参数,枚举每两个队伍的比赛结果(分配当前队伍的分数). 可以发现方案数量与具体哪只球队得了多少分无关,只与当前比赛的队伍数量和得分序列的组成有关.可以记忆化搜 ...

  10. JDK 动态代理的简单理解

    动态代理 代理模式是 Java 中的常用设计模式,代理类通过调用被代理类的相关方法,提供预处理.过滤.事后处理等服务,动态代理及通过反射机制动态实现代理机制.JDK 中的 java.lang.refl ...