文字一行超出隱藏顯示

就是當你的文字字數過多超出容器的時候，讓你超出部分隱藏，並在尾部顯示省略號

首先寫一個p標籤，然後給他寫一個較長的文字

<p>這是有段很長很長很長很長很長很長很長很長很長很長很長很長的文字</p>

給p標籤寫一個200px寬度和灰色背景顏色

p{
    width: 200px;
    background-color: #ccc;
}

效果

現在我們看到p標籤會自動換行
接下來讓文字強制一行顯示

p{
    width: 200px;
    background-color: #ccc;
    white-space
 
: nowrap;/*強制一行顯示*/
}

效果

現在文字已經一行顯示了，並且文字超出了p標籤
接下來讓超出部分隱藏

p{
    width: 200px;
    background-color: #ccc;
    white-space: nowrap;/*強制一行顯示*/
    overflow:hidden;/*超出部分隱藏*/
}

效果

現在超出p標籤部分已經隱藏了
接下來只要讓最後顯示省略號表示文字未完全顯示就OK了

p{
    width: 200px;
    background-color: #ccc;
    white-space
 
: nowrap;/*強制一行顯示*/
    overflow:hidden;/*超出部分隱藏*/
    text-overflow: ellipsis;/*最後新增省略號*/
}

最終效果

white-space屬性：

text-overflow屬性：

長單詞強制換行

現在寫一個p標籤，裡面寫一個連續的字母

<p>pppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp</p>

給p標籤寫一個200px寬度和灰色背景顏色

p{
    width: 200px;
    background-color: #ccc;
}

效果

現在我們的文字被識別為一個長單詞，所以不會自動換行
接下來只用給p標籤一個word-wrap:break-word;就可以自動換行

p{
    width: 200px;
    background-color: #ccc;
    word-wrap:break-word;
}

效果

word-wrap屬性：