在CSS中,表格是一個常見的元素。但是,當表格的單元格內(nèi)的文本數(shù)量超過了單元格的寬度時,往往會出現(xiàn)文字溢出的問題。一種解決方案是豎排文字。
table { border-collapse: collapse; /*合并邊框*/ width: 100%; /*設置表格寬度*/ } td { border: 1px solid black; /*設置單元格邊框*/ padding: 10px; /*設置單元格內(nèi)間距*/ max-width: 150px; /*設置單元格最大寬度*/ } td.vertical { writing-mode: vertical-lr; /*豎排文字*/ text-align: center; /*使得文字居中*/ }
首先,在table標簽中設置border-collapse為collapse,可以合并單元格邊框。同時,設置表格寬度為100%。
接著,在td標簽中設置單元格邊框和內(nèi)間距,并設置單元格最大寬度。當單元格內(nèi)文字超過最大寬度時,文字會被截斷。
最后,使用td.vertical類選擇器,設置writing-mode為vertical-lr,使文字豎排。同時,為了讓文字居中,需要設置text-align為center。
通過這種方式,可以解決表格單元格內(nèi)文字超數(shù)量的問題,同時也讓表格顯示更加美觀。
下一篇css插入圖片尺寸