溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了css設(shè)置td溢出隱藏的方法，具有一定借鑒價值，需要的朋友可以參考下。下面就和我一起來看看吧。
css設(shè)置td溢出隱藏的方法：首先使用“word-break:keep-all”語句設(shè)置不換行；然后使用“overflow:hidden”語句設(shè)置超出隱藏部分；最后使用“text-overflow:ellipsis”語句設(shè)置溢出顯示省略號。
td溢出隱藏
table{
width:100px;
table-layout:fixed;/* 只有定義了表格的布局算法為fixed，下面td的定義才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內(nèi)容超出寬度時隱藏超出部分的內(nèi)容 */
text-overflow:ellipsis;/* 當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用*/
}全部代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document</title>
<style>
table{
width:100px;
table-layout:fixed;/* 只有定義了表格的布局算法為fixed，下面td的定義才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 或是 white-space:nowrap;不換行 */
overflow:hidden;/* 內(nèi)容超出寬度時隱藏超出部分的內(nèi)容 */
text-overflow:ellipsis;/* 當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用*/
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>19999</td>
<td>19999</td>
</tr>
<tr>
<td>19999</td>
<td>19999</td>
</tr>
<tr>
<td>19999</td>
<td>19999</td>
</tr>
</table>
</body>
</html>效果截圖：
css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言，主要是用來設(shè)計網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。
以上就是css設(shè)置td溢出隱藏的方法的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來億速云行業(yè)資訊！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼