CSS3中的省略號可以讓文本在超出一定長度時以省略號（...）來表示。當文本過長而無法全部顯示在區(qū)域內(nèi)時，特別是在響應式設計中，省略號就非常有用了。

省略號的實現(xiàn)很簡單，只需要將text-overflow屬性設置成ellipsis就可以了。下面是一個示例：

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

上面的代碼將會使段落中的文本超過一定寬度時出現(xiàn)省略號。詳細解釋一下這三個屬性：

• overflow: hidden;隱藏超出元素寬度或高度的內(nèi)容
• text-overflow: ellipsis;使用省略號來表示文本（Firefox中需要加上-webkit-text-overflow: ellipsis;來兼容）
• white-space: nowrap;防止文本換行

需要注意的是，省略號只在一行文本中生效，如果有多行文本，可以使用JavaScript來實現(xiàn)。

function addEllipsis(element) {
var lineHeight = parseInt(getComputedStyle(element).lineHeight, 10);
var numberOfLines = Math.round(element.clientHeight / lineHeight);
var text = element.innerHTML.trim();
while (element.scrollHeight >element.clientHeight) {
text = text.slice(0, -1);
element.innerHTML = text + '...';
}
if (element.innerHTML.trim().split('\n').length >numberOfLines) {
element.innerHTML = text + '...';
}
}
var elements = document.querySelectorAll('.ellipsis');
elements.forEach(addEllipsis);

上面的代碼可以實現(xiàn)在多行文本中添加省略號，需要給需要添加省略號的元素加上class="ellipsis"。

綜上所述，省略號在CSS3中非常方便，可以優(yōu)美地完成響應式設計。