我們?cè)谧?a href="http://www.m.se333444.com/wangzhansheji/" target="_blank">網(wǎng)站設(shè)計(jì)開發(fā)過程中，經(jīng)常會(huì)遇到需要限制單元格寬度并且內(nèi)容超出部分顯示省略號(hào)的的情況，很多新手程序員不會(huì)寫，在網(wǎng)上也搜不到滿意的答案，面對(duì)老板的催促，真是急的做夢(mèng)都在想這個(gè)問題。
那么網(wǎng)頁(yè)前端html表格內(nèi)單元格內(nèi)容超出時(shí)顯示省略號(hào)代碼怎么寫呢？下面就簡(jiǎn)單的介紹下如何達(dá)到這種效果。
1. 控制文本不換行
white-space: nowrap;
2. 超出長(zhǎng)度時(shí)，出現(xiàn)省略號(hào)
overflow:hidden;
text-overflow:ellipsis
3. 修改表格布局算法
table-layout:fixed;table-layout的默認(rèn)值為automatic，意思是列寬度由單元格內(nèi)容設(shè)定。而fixed意思是列寬由表格寬度和列寬度設(shè)定。
也就是說當(dāng)你給表格設(shè)定列寬時(shí)，實(shí)際情況是不起作用的，當(dāng)單元格內(nèi)容過多時(shí)，依然會(huì)把寬度撐開。如果需要讓表格的列寬顯示方式由自己給單元格定義的列寬決定，就必須使用fixed這個(gè)值。
注意：1、表格必須設(shè)置寬度 2、如果只設(shè)置表格寬度，而不設(shè)置列寬度的話，列的寬度會(huì)平均分配。
網(wǎng)頁(yè)前端html表格內(nèi)單元格內(nèi)容超出時(shí)顯示省略號(hào)代碼怎么寫？
如下代碼所示，表格中安排了姓名、年齡、性別以及地址四列，這幾個(gè)列的長(zhǎng)度分別為10%、20%、30%、40%。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>表格演示</title>
<style type="text/css">
table{
width: 100%;
table-layout: fixed;
}
.name{
width: 10%;
}
.age{
width: 20%;
}
.sex{
width: 30%;
}
.addr{
width: 40%;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="name">姓名</th>
<th class="age">年齡</th>
<th class="sex">性別</th>
<th class="addr">地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>李四</td>
<td>13</td>
<td>男</td>
<td>山東</td>
</tr>
<tr>
<td>李四</td>
<td>13</td>
<td>男</td>
<td>山東</td>
</tr>
<tr>
<td>李四</td>
<td>13</td>
<td>男</td>
<td>山東</td>
</tr>
</tbody>
</table>
</body>
</html>
很容易可以看出，姓名、年齡、性別以及地址等列的長(zhǎng)度分別是10%、20%、30%、40%。
如果將開始的姓名內(nèi)容增多，效果簡(jiǎn)直不忍直視（＞﹏＜）！
表格單元格內(nèi)容超出時(shí)顯示省略號(hào)效果(實(shí)現(xiàn)代碼)
不忍直視（＞﹏＜）！！
如何把單行內(nèi)容超出部分顯示為省略號(hào)呢？只需要將單元格設(shè)置如下屬性：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
white-space: nowrap;/*控制單行顯示*/
overflow: hidden;/*超出隱藏*/
text-overflow: ellipsis;/*隱藏的字符用省略號(hào)表示*/
話不多說，上代碼！
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>表格演示</title>
<style type="text/css">
table{
width: 100%;
table-layout: fixed;
}
.name{
width: 10%;
}
.age{
width: 20%;
}
.sex{
width: 30%;
}
.addr{
width: 40%;
}
td{
white-space: nowrap;/*控制單行顯示*/
overflow: hidden;/*超出隱藏*/
text-overflow: ellipsis;/*隱藏的字符用省略號(hào)表示*/
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="name">姓名</th>
<th class="age">年齡</th>
<th class="sex">性別</th>
<th class="addr">地址</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name2">李四sssssssssssssssssssssssssssssssssss</td>
<td>13</td>
<td>男</td>
<td>山東</td>
</tr>
<tr>
<td>李四</td>
<td>13</td>
<td>男</td>
<td>山東</td>
</tr>
<tr>
<td>李四</td>
<td>13</td>
<td>男</td>
<td>山東</td>
</tr>
</tbody>
</table>
</body>
</html>
關(guān)于網(wǎng)頁(yè)前端html表格內(nèi)單元格內(nèi)容超出時(shí)顯示省略號(hào)代碼怎么寫？以上就是小編分享給大家的主要內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持。
免責(zé)聲明：如發(fā)現(xiàn)內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息發(fā)郵件至466055085@qq.com，我們將及時(shí)溝通與處理。本站部分內(nèi)容來源于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
2022-3-27
