引言:

寫前端UI的朋友們也許都遇到過這樣的問題:我們需要實現這樣一個需求,在一個父級元素中隱藏一個可能過長的文本:

 

這個文本可能是單行的:

移動開發(fā)培訓,Android培訓,安卓培訓,手機開發(fā)培訓,手機維修培訓,手機軟件培訓

 

也可能是多行的:

移動開發(fā)培訓,Android培訓,安卓培訓,手機開發(fā)培訓,手機維修培訓,手機軟件培訓 

下面我就給大家展示如何簡單或優(yōu)雅地實現這種需求

 

單行文本溢出的省略

 

先上代碼

移動開發(fā)培訓,Android培訓,安卓培訓,手機開發(fā)培訓,手機維修培訓,手機軟件培訓

<div style =  'width:400px;
               height:40px;
               border:1px solid red;'>
        <p style='overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;'>
          這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本        </p>
</div>

網友評論