什么是超出省略？ 當(dāng)文本內(nèi)容超出了其容器的邊界時(shí)，為了保持布局的整齊，我們可以將超出部分省略掉。 CSS3中提供了一個(gè)屬性text-overflow可以實(shí)現(xiàn)文本超出省略的效果，它只有在文本溢出到一個(gè)有固定寬度的容器時(shí)才有用。 text-overflow屬性用來(lái)設(shè)置文本溢出時(shí)的表現(xiàn)形式，可以使用以下值： 1. clip：溢出部分直接被截?cái)啵伙@示省略號(hào)。 2. ellipsis：省略號(hào)代替溢出部分，顯示省略號(hào)。 3. string：自定義字符串代替溢出部分，顯示自定義的字符串。 text-overflow屬性需要與white-space屬性一起使用，white-space屬性用來(lái)設(shè)置空格如何處理。當(dāng)white-space的取值為nowrap時(shí)，文本框內(nèi)的文本不會(huì)換行；當(dāng)取值為pre時(shí)，文本框內(nèi)的文本也不會(huì)換行，但是會(huì)保留文本中的空格和換行符號(hào)。 下面是一個(gè)例子示范：

p {
border: 1px solid black;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
 }

在上面的代碼中，我們先設(shè)置了一個(gè)p標(biāo)簽的邊框?yàn)?像素的黑色實(shí)線，設(shè)置寬度為100像素。接下來(lái)，我們將文本超出的部分隱藏，保留文本中的空格和換行符號(hào)，將超出部分用省略號(hào)代替，最終實(shí)現(xiàn)了文本溢出省略的效果。 總結(jié) text-overflow屬性可用于文本溢出省略，它需要與white-space屬性一起使用。 當(dāng)white-space屬性的取值為nowrap時(shí)，文本框內(nèi)的文本不會(huì)換行；當(dāng)取值為pre時(shí)，文本框內(nèi)的文本也不會(huì)換行，但是會(huì)保留文本中的空格和換行符號(hào)。 text-overflow屬性可以設(shè)置clip、ellipsis、string三種不同的值，可以根據(jù)實(shí)際需求來(lái)選擇不同的值。