CSS 超出文字用.的方法 在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，經(jīng)常會(huì)遇到超出部分文字需要用省略號(hào)表示的情況。這種情況可以使用CSS中的text-overflow屬性來(lái)實(shí)現(xiàn)。下面是實(shí)現(xiàn)方法。 1.設(shè)置包含文字的容器的寬度 首先，需要設(shè)置包含文字的容器的寬度。這里我們用一個(gè)p標(biāo)簽來(lái)演示。設(shè)置寬度時(shí)需要注意，容器的寬度必須要比文字的寬度小才會(huì)出現(xiàn)超出效果。

<style>
/*設(shè)置容器寬度*/
p{
width: 200px;
}
</style>

2.設(shè)置超出部分顯示為省略號(hào) 接下來(lái)，使用text-overflow屬性來(lái)實(shí)現(xiàn)超出部分顯示為省略號(hào)。這個(gè)屬性需要和white-space和overflow屬性一起使用。

<style>
/*設(shè)置容器寬度*/
p{
width: 200px;
/*超出部分顯示為省略號(hào)*/
text-overflow: ellipsis;
/*文字超出容器時(shí)，隱藏超出部分*/
overflow: hidden;
/*將文字保持在同一行上*/
white-space: nowrap;
}
</style>

3.完整代碼 最后，將以上兩個(gè)步驟放在一起，就可以實(shí)現(xiàn)超出文字用.的效果了。

<style>
/*設(shè)置容器寬度*/
p{
width: 200px;
/*超出部分顯示為省略號(hào)*/
text-overflow: ellipsis;
/*文字超出容器時(shí)，隱藏超出部分*/
overflow: hidden;
/*將文字保持在同一行上*/
white-space: nowrap;
}
</style>
<p>CSS超出文字用...的方法很簡(jiǎn)單，只要設(shè)置好容器寬度以及使用text-overflow屬性即可。</p>

總結(jié) 使用CSS實(shí)現(xiàn)超出文字用省略號(hào)表示的方法，只需要設(shè)置好容器寬度和使用text-overflow屬性即可。需要注意的是，容器的寬度必須要比文字的寬度小才會(huì)出現(xiàn)超出效果。