超出文字部分使用省略号显示

2020-12-28

表格中(重点,表格中)

超出文字部分使用省略号显示

未设置前效果

设置后

只需要在css中设置

table{
	width:100px;
	table-layout:fixed;
}
td {
	width:150px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: middle;
}

td可以根据不同的情况进行换,对某一个td进行设置class="project_name"就可以变成这样

.project_name {
	width:150px;
	text-overflow: ellipsis; 
	overflow: hidden;
	white-space: nowrap;
	vertical-align: middle;
}

1.width 表格宽度

2.text-overflow: ellipsis; /* for IE */ 对于IE浏览器来说

clip:当前对象内文本溢出时不显示省略标记(…),而是将溢出部分裁剪。

ellipsis:当对象内文本一处时显示省略标记(…)。

3.overflow: hidden;可以让超出部分裁剪掉

4.white-space: nowrap; 属性设置如何处理元素内的空白

5.vertical-align: middle;垂直居中

平常标签中(平常标签)

超出文字部分使用省略号显示

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
flow: hidden;
white-space: nowrap;
text-overflow: ellipsis;