小編給大家分享一下css3如何設(shè)置a標(biāo)簽超出部分為省略號，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站是專業(yè)的南丹網(wǎng)站建設(shè)公司，南丹接單;提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行南丹網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

方法：1、利用“overflow:hidden;”樣式設(shè)置a標(biāo)簽文本超出隱藏；2、利用“display: block;”將a標(biāo)簽設(shè)置為塊級元素；3、利用“text-overflow:ellipsis;”設(shè)置a標(biāo)簽超出部分的樣式為省略號即可。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3如何設(shè)置a標(biāo)簽超出部分為省略號

text-overflow 屬性指定當(dāng)文本溢出包含它的元素時，應(yīng)該如何顯示。可以設(shè)置溢出后，文本被剪切、顯示省略號 (...) 或顯示自定義字符串（不是所有瀏覽器都支持）。

text-overflow: clip|ellipsis|string|initial|inherit;

clip    剪切文本。

ellipsis    顯示省略符號 ... 來代表被修剪的文本。

示例如下：

a標(biāo)簽文本給出一個固定長度和樣式就可以顯示省略號

css：

 .cont {
            width: 180px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            float: left;
        }

html:

這是一個名稱很長的文檔吧要測試超出功能

顯示效果如圖：

看完了這篇文章，相信你對“css3如何設(shè)置a標(biāo)簽超出部分為省略號”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！