1. 程式人生 > >CSS字型過長顯示省略號 ...

CSS字型過長顯示省略號 ...

通常字型過長時需要顯示省略號   ...
 

<div>字型過長時顯示省略號的幾種方法</div>
div{
   overflow:hidden;//隱藏文字
   text-overflow:ellipsis;//顯示 ...
   white-space:nowrap;//不換行
   width:100px;
}

 

但如果想在第二行或者其他行顯示省略號,而非第一行,則:

div{
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;//在第幾行顯示...
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width:100px;
}