引言：

寫(xiě)前端UI的朋友們也許都遇到過(guò)這樣的問(wèn)題：我們需要實(shí)現(xiàn)這樣一個(gè)需求，在一個(gè)父級(jí)元素中隱藏一個(gè)可能過(guò)長(zhǎng)的文本：

 

這個(gè)文本可能是單行的：

移動(dòng)開(kāi)發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),手機(jī)維修培訓(xùn),手機(jī)軟件培訓(xùn)

 

也可能是多行的：

移動(dòng)開(kāi)發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),手機(jī)維修培訓(xùn),手機(jī)軟件培訓(xùn) 

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

 

單行文本溢出的省略

 

先上代碼

移動(dòng)開(kāi)發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機(jī)開(kāi)發(fā)培訓(xùn),手機(jī)維修培訓(xùn),手機(jī)軟件培訓(xùn)

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

網(wǎng)友評(píng)論