這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)如何實(shí)現(xiàn)html表格單元格內(nèi)容超出時(shí)顯示省略號(hào)效果，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)是一家專(zhuān)注于成都做網(wǎng)站、成都網(wǎng)站制作與策劃設(shè)計(jì),開(kāi)化網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:開(kāi)化等地區(qū)。開(kāi)化做網(wǎng)站價(jià)格咨詢(xún):13518219792

說(shuō)明

在前端開(kāi)發(fā)中，經(jīng)常會(huì)遇到需要限制單元格寬度并且內(nèi)容超出部分顯示省略號(hào)的的情況。下面就簡(jiǎn)單的介紹下如何達(dá)到這種效果。

準(zhǔn)備知識(shí)

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

也就是說(shuō)當(dāng)你給表格設(shè)定列寬時(shí)，實(shí)際情況是不起作用的，當(dāng)單元格內(nèi)容過(guò)多時(shí)，依然會(huì)把寬度撐開(kāi)。如果需要讓表格的列寬顯示方式由自己給單元格定義的列寬決定，就必須使用fixed這個(gè)值。

注意：1、表格必須設(shè)置寬度 2、如果只設(shè)置表格寬度，而不設(shè)置列寬度的話(huà)，列的寬度會(huì)平均分配。

代碼演示

如下代碼所示，表格中安排了姓名、年齡、性別以及地址四列，這幾個(gè)列的長(zhǎng)度分別為10%、20%、30%、40%。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

    
    
    


    

        

            

                
姓名
                
年齡
                
性別
                
地址
            
        
        

            

                
李四
                
13
                
男
                
山東
            
            

                
李四
                
13
                
男
                
山東
            
            

                
李四
                
13
                
男
                
山東
            
        
    

顯示效果如下所示：

很容易可以看出，姓名、年齡、性別以及地址等列的長(zhǎng)度分別是10%、20%、30%、40%。

如果將第一個(gè)的姓名內(nèi)容增多，效果簡(jiǎn)直不忍直視（＞﹏＜）！

不忍直視（＞﹏＜）！！

如何把單行內(nèi)容超出部分顯示為省略號(hào)呢？只需要將單元格設(shè)置如下屬性：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

white-space: nowrap;/*控制單行顯示*/   
overflow: hidden;/*超出隱藏*/   
text-overflow: ellipsis;/*隱藏的字符用省略號(hào)表示*/

話(huà)不多說(shuō)，上代碼！

XML/HTML Code復(fù)制內(nèi)容到剪貼板

    
    
    


    

        

            

                
姓名
                
年齡
                
性別
                
地址
            
        
        

            

                
李四sssssssssssssssssssssssssssssssssss
                
13
                
男
                
山東
            
            

                
李四
                
13
                
男
                
山東
            
            

                
李四
                
13
                
男
                
山東
            
        
    

修改后，效果如下：

上述就是小編為大家分享的如何實(shí)現(xiàn)html表格單元格內(nèi)容超出時(shí)顯示省略號(hào)效果了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。