CSS中有一種非常常見的效果，那就是不換行自動省略。這種效果常出現(xiàn)在文章標(biāo)題、導(dǎo)航欄、卡片信息和表格等地方，能夠讓網(wǎng)頁看起來更加簡潔、美觀。

/*樣式*/
.ellipsis {
white-space: nowrap; /*不換行*/
overflow: hidden; /*隱藏超出部分*/
text-overflow: ellipsis; /*顯示省略號*/
}

不換行的關(guān)鍵是white-space屬性，它有三個值：normal、nowrap和pre-wrap。其中normal表示自動換行，pre-wrap表示保持格式不變但可以換行。而nowrap則是我們需要的不換行狀態(tài)。

overflow:hidden可以隱藏超出容器范圍的文字，而text-overflow: ellipsis則在超出部分顯示省略號。

除了以上這種方法，我們還可以使用JavaScript來實現(xiàn)不換行自動省略的效果。代碼如下：

/*實現(xiàn)*/
function ellipsis(target, length) {
var text = target.innerText.trim();
if (text.length<= length) {
return;
}
target.innerText = text.substr(0, length) + '...';
}
ellipsis(document.getElementById('title'), 15);

以上代碼將目標(biāo)元素內(nèi)的文字進(jìn)行截取，并在末尾加上省略號，如果不需要截取，就不添加省略號。

總之，實現(xiàn)不換行自動省略并不難，只需要掌握好CSS相關(guān)屬性或JavaScript截取字符串的方法即可。