上海網(wǎng)絡(luò)推廣公司為您提供網(wǎng)站建設(shè)、定制網(wǎng)站設(shè)計(jì)制作、SEO網(wǎng)站優(yōu)化排名及網(wǎng)絡(luò)營(yíng)銷外包服務(wù)
服務(wù)熱線:158 2101 5952

網(wǎng)頁(yè)前端html表格內(nèi)單元格內(nèi)容超出時(shí)顯示省略號(hào)代碼怎么寫?

2022-3-27
我們?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á)到這種效果。

網(wǎng)頁(yè)前端html表格內(nèi)單元格內(nèi)容超出時(shí)顯示省略號(hào)代碼怎么寫?

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)。

相關(guān)文章

主站蜘蛛池模板: 日韩精品无码一区二区三区不卡| 亚洲欧美18v中文字幕高清| 日本乱偷人妻中文字幕在线| 亚洲欧美日韩在线一区| 精品中文字幕一区二区三区四区| 国产男女猛视频在线观看网站| 一级黄色毛片播放| 日本精品高清一区二区| 亚洲乱人伦在线| 欧美综合婷婷欧美综合五月| 免费无码看av的网站| 老子影院午夜伦手机不卡无| 国产又爽又黄又无遮挡的激情视频| 99久久婷婷国产综合亚洲| 岛国片在线免费观看| 久久久久久久久久久久久久久| 亚洲色图第一页| 在公车上被一个接一个| √天堂中文www官网| 日韩欧美一二三| 亚洲美女视频网| 色www永久免费视频| 国产成人无码精品一区在线观看 | 天天躁日日躁狠狠躁人妻| 中文字幕无码日韩专区| 日本簧片在线观看| 久萆下载app下载入口| 欧美人与性动交α欧美精品图片 | 91自产拍在线观看精品| 女人18毛片免费观看| 一根巨茎走天下小说| 成人永久福利在线观看不卡| 久久久久国产一区二区三区| 日韩在线电影网| 久久青草亚洲AV无码麻豆| 欧洲吸奶大片在线看| 亚洲免费视频一区二区三区| 欧美极品videossex激情| 亚洲理论电影在线观看| 漂亮人妻洗澡被公强| 向日葵app下载观看免费|