css限制單行文字輸入,超出部分使用...替換

WBOY
發布: 2016-11-30 23:59:40
原創
1381 人瀏覽過

  在實際應用中,經常需要只顯示一行文字,不允許文字換行破壞整體樣式的情況。例如‘商品的名稱’,‘簡介’等等。但是由於顯示器的寬度不一樣,會出現後台所給文字內容,一行文字容納不下的情況。溢出的文字如果使用overflow:hidden生硬的給隱藏掉,顯示的效果不是很好,這時,溢出的文字就需要使用省略號...來替換。使用js截取有點複雜,可直接使用css的屬性進行設置,實現該效果。

  需為文字物件新增的css屬性如下:

休閒純色百搭短褲

.className{width: 60px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

顯示的效果如下:

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板