css 單行文本溢出顯示省略號(hào)

phoenixsky 發(fā)布于2019-08-29 12:19 / 1568人閱讀

摘要：有時(shí)候我們會(huì)遇到這樣的情景，在一行顯示過(guò)長(zhǎng)的文字時(shí)會(huì)溢出，頁(yè)面將變得很丑陋。這時(shí)候我們想要只顯示一部分文字，將多余部分以省略號(hào)的形式顯示。那么我們可以通過(guò)設(shè)置樣式來(lái)達(dá)到目的。代碼示例好了，就是這樣

有時(shí)候我們會(huì)遇到這樣的情景，在一行顯示過(guò)長(zhǎng)的文字時(shí)會(huì)溢出，頁(yè)面將變得很丑陋。這時(shí)候我們想要只顯示一部分文字，將多余部分以省略號(hào) “...” 的形式顯示。那么我們可以通過(guò)設(shè)置 CSS 樣式來(lái)達(dá)到目的。

代碼示例：

HTML


    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS

.truncate {
  width: 50px;
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

好了，就是這樣！

云服務(wù)器 GPU云服務(wù)器 php文本溢出省略省略號(hào)css css省略溢出文本

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111812.html

相關(guān)文章

CSS實(shí)現(xiàn)單行、多行文本溢出顯示省略號(hào)

摘要：如果實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)同學(xué)們應(yīng)該都知道用屬性來(lái)，當(dāng)然還需要加寬度屬來(lái)兼容部分瀏覽。接下來(lái)重點(diǎn)說(shuō)一說(shuō)多行文本溢出顯示省略號(hào)，如下。如果實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)同學(xué)們應(yīng)該都知道用text-overflow:ellipsis屬性來(lái)，當(dāng)然還需要加寬度width屬來(lái)兼容部分瀏覽。實(shí)現(xiàn)方法： overflow: hidden; text-overflow:ellipsis; whit...

番茄西紅柿 2019-04-23 14:39 評(píng)論0 收藏0
CSS單行、多行文本溢出顯示省略號(hào)

摘要：?jiǎn)涡形谋疽绯鲲@示省略號(hào)需要對(duì)容器設(shè)置單行高度多行文本溢出顯示省略號(hào)瀏覽器或移動(dòng)端的頁(yè)面在瀏覽器或移動(dòng)端絕大部分是內(nèi)核的瀏覽器可以直接使用的擴(kuò)展屬性是私有屬性注意這是一個(gè)不規(guī)范的屬性，它沒(méi)有在的規(guī)范草案中用來(lái)限制在一個(gè)塊元素顯單行文本溢出顯示省略號(hào) overflow:hidden; text-overflow:ellipsis; white-space:nowrap; （需要對(duì)容器設(shè)置...

PiscesYE 2019-08-29 12:31 評(píng)論0 收藏0
css實(shí)現(xiàn)單行、多行文本超出顯示省略號(hào)

摘要：前言項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行多行文本超出顯示為省略號(hào)。單行文本省略文本溢出顯示省略號(hào)文本不會(huì)換行語(yǔ)法默認(rèn)值適用于所有元素當(dāng)對(duì)象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記，而是將溢出的部分裁切掉。前言：項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行、多行文本超出顯示為省略號(hào)。這篇文章主要總結(jié)了小編解決此問(wèn)題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

wing324 2019-08-02 12:05 評(píng)論0 收藏0
css實(shí)現(xiàn)單行、多行文本超出顯示省略號(hào)

摘要：前言項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行多行文本超出顯示為省略號(hào)。單行文本省略文本溢出顯示省略號(hào)文本不會(huì)換行語(yǔ)法默認(rèn)值適用于所有元素當(dāng)對(duì)象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記，而是將溢出的部分裁切掉。前言：項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行、多行文本超出顯示為省略號(hào)。這篇文章主要總結(jié)了小編解決此問(wèn)題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

paulquei 2019-08-29 17:20 評(píng)論0 收藏0
css實(shí)現(xiàn)單行、多行文本超出顯示省略號(hào)

摘要：前言項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行多行文本超出顯示為省略號(hào)。單行文本省略文本溢出顯示省略號(hào)文本不會(huì)換行語(yǔ)法默認(rèn)值適用于所有元素當(dāng)對(duì)象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記，而是將溢出的部分裁切掉。前言：項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行、多行文本超出顯示為省略號(hào)。這篇文章主要總結(jié)了小編解決此問(wèn)題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

maxmin 2019-08-26 13:24 評(píng)論0 收藏0