關於文本溢出

受網頁佈局空間的影響，很多時候在有限的空間內並不能完全顯示所有的內容，而當實際內容超出實際存放的時候，就是溢出。

此時，需要對溢出的內容做相應的處理。

我們經常能在網頁中看到一段文字過長出現省略號的效果

其中多行文本只能通過JS實現，而單行文本可直接通過CSS代碼實現

以下示例即爲單行文本實現省略效果的說明

首先我們需要4個屬性配合使用：

1、width:200px;設置寬度，文本超出多少猜隱藏

2、white-space:nowrap;強制不換行

3、overflow:hidden；當文本溢出時，進行隱藏

4、text-overflow:ellipsis;文本溢出隱藏時出現省略號（ellipsis[ɪˈlɪpsɪs] 省略號）

示例：

<style>
.ellipsis{
		border:1px solid black;/*設置邊框以便直觀顯示*/
		width:200px;/*設置容器寬度*/
		white-space:nowrap;/*強制不換行*/
		overflow:hidden;/*溢出隱藏*/
		text-overflow:ellipsis;/*溢出顯示省略號*/
		}
</style>
<div class="ellipsis">
    	碰到一個實現溢出文本顯示省略號的需求,使用js截取字符串然後判斷字符串長度實現,不過相對比較繁瑣,本文爲大介紹下使用 text-overflow: ellipsis 實現溢出文本省略號
    </div>

overflow溢出屬性，有如下幾個屬性

    visible   默認值

    hidden   溢出隱藏

    scroll   滾動條（右側以及下部出現，不常用，影響美觀）

    auto   超出時出現滾條 (body的默認屬性)

一般字母和數字沒有空格不會換行但中文會以文字爲單位自動換行 這樣在一行內文本是不會溢出，

擴展如何讓字母和數字沒有空格的情況下自動換行

word-wrap:break-word;自動換行屬性（實用）