当元素内文字过多时出现省略号(表格内需要加div)

测试人员为了测试极端情况通常都会起一个很长很长很长很长很长用于测试的公司名字。每当这个时候，产品都会说那就只固定显示多少个字，其他的都点点点省略，然后鼠标浮上去出现浮层显示全部内容。一般都会写一个小黄层来装全部内容，但是如果偷懒的话也可以直接利用元素的title属性。不过还是取决于产品和设计的态度，他们不接受，还是只能乖乖的写小黄层。好吧，跑题了。。。。。。

我当时天真的以为只要设置text-overflow属性为ellipsis就可以了。然后发现怎么都没用。。。

1、目标元素必须有一个固定的宽。

2、设置出现省略号，必须设置其他两个属性

// 内容超出也不换行

white-space: nowrap;

// 溢出则隐藏溢出部分

overflow: hidden;

// 文字溢出则用省略号

text-overflow: ellipsis;

同时，在表格内需要实现此种效果时，

方式一： 可在td内放一个div,然后div内放内容，样式写在div上.

方式二：直接给定td单元格的宽度，然后注意Table要设置table-layout:fixed;保证给定的td单元格的宽是固定的，不会随内容而扩宽。

 

转载于:https://www.cnblogs.com/coconutGirl/p/7501777.html