技術標籤：海綿寶寶學習日記javabootstrapjavaee

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;