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. 德卡Z90读卡器读取社保卡，德卡Z90读卡器CSharp示例程序源码

    前言,最近学习调用 医保卡业务,使用德卡读卡器,主要就是调用一个DLL,动态库文件. 借着自学的机会把心得体会都记录下来,方便感兴趣的小伙伴学习与讨论. 内容均系原创,欢迎大家转载分享,但转载的同时别 ...

  2. 【PAT】1032 Sharing (25)（25 分）

    1032 Sharing (25)(25 分) To store English words, one method is to use linked lists and store a word l ...

  3. 【LOJ】#6435. 「PKUSC2018」星际穿越

    题解 想出70的大众分之后就弃疗了,正解有点神仙 就是首先有个比较显然的结论,就是要么是一直往左走,要么是走一步右边,然后一直往左走 根据这个可以结合RMQ写个70分的暴力 我们就考虑,最优的话显然是 ...

  4. 【LOJ】#2079. 「JSOI2016」轻重路径

    题解 写数据结构的时候我代码就会变得非常非常长 一看别人1.5K 2.3K 我6.3K-- orzzzzz 我们很容易想到离线倒着插入,然而,有个小锅叫如果size相同保持原来的重儿子不变 我们需要写 ...

  5. 神仙数据结构——FHQ_Treap

    $FHQ\_Treap$是平衡树的一种,它不仅支持几乎所有的平衡树的操作,而且实现特别简单,总共只有两个操作.这里来简单介绍一下. 基本操作 $FHQ\_Treap$和$Treap$一样是需要用随机值 ...

  6. Java 多线程 - synchronize 关键字

    目录 Java 多线程 - synchronize 关键字 Java 多线程 - synchronize 关键字 学习自 http://cmsblogs.com/?p=2071 https://www ...

  7. 开发人员如何正确对待BUG？

    ‌1.前端开发与后端开发 出了问题,最重要的是先找到方法迅速解决,而不是去互相指责.前端存在这样的思维模式,后端也存在这样的思维模式,这种思维模式不太好.出了问题,最好先检查一下自己,反省是不是自己这 ...

  8. faker php测试数据库生成2

    因内容太长,被csdn截断了,只好把另外的内容写到这里. //Biased // 在10到20之间得到一个随机数字,有更大的几率接近20 echo $faker->biasedNumberBet ...

  9. android touch事件分发流程

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 三个方法:分发触摸事件dispatchTouchEvent.在触摸事件的时候onTouc ...

  10. dsu on tree题表

    dsu on tree,又名树上启发式合并.重链剖分,是一类十分实用的trick,它常常可以作为一些正解的替代算法: 1.DFS序+线段树/主席树/线段树合并 2.对DFS序分块的树上莫队 3.长链剖 ...