CSS3 文字超出隱藏效果 在Web開發中，CSS3 的各種新特性給我們開發者提供了更多的工具去打磨我們的頁面，其中文字超出隱藏即為一種實用的特性。如果我們想隱藏多出的文本，可以使用 CSS 的 text-overflow 屬性來做到。 text-overflow 屬性可以設置如何在元素內部包含的文本溢出時進行處理，可以有三種屬性值: ellipsis：當文本溢出時，后面出現省略號（...）。 clip：當文本溢出時，它將被隱藏。 string：當文本溢出時，使用指定字符串來代替省略號。 以下是一個示例代碼：

p {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

以上代碼將會把元素內的文本包裹在一行中，當溢出時，會隱藏并且用省略號代替。需要注意的是，這里使用了 white-space: nowrap 屬性，因為在元素內包含的文本換行會破壞這個效果。 text-overflow 屬性也可以和其他屬性一起使用，比如在元素內包含圖片和文本的情況下，可以使用以下示例代碼：

div {
width: 250px;
height: 150px;
overflow: hidden;
}
p {
float: left;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
img {
float: right;
max-width: 50px;
max-height: 50px;
margin-left: 10px;
}

以上代碼將會讓所有超出的文本被隱藏，并且后面跟著省略號。圖片元素被設置為 float: right，使它在文本的右邊。 總之，text-overflow 是一個很實用的 CSS3 特性，在需要隱藏多出的文本時可以幫助我們輕松地做到。如果你的元素容器包含文本和圖片等多個元素，只需要簡單地設置屬性即可讓元素完美地展示你想要的效果。