CSS之文字溢出處理

1.單行文本之三劍客

<p>劉詩詩，原名劉詩施，1987年3月10日出生於北京市，中國內地影視女演員、影視出品人。</p>

p{

　　border: 1px solid red;

　　width: 400px;

　　height: 40px;

　　white-space: nowrap;

　　overflow: hidden;

　　text-overflow: ellipsis;

}

當邊框包不住文字時，首先使用nowrap屬性設置為一行顯示，文字溢出部分使用hidden把它隱藏，隱藏之后用“...”形式顯示在文本框內。

p{

　　border: 3px solid blueviolet;

　　width: 500px;

　　height: 40px;　　 //當高度不是行高的倍數時，有可能出現文字在邊框線那邊

　　line-height: 20px;

　　overflow: hidden;

}