強(qiáng)制文本在一行內(nèi)顯示,并且后面有省略號(hào)效果的實(shí)現(xiàn)方法
我要評(píng)論設(shè)置或檢索是否使用一個(gè)省略標(biāo)記（...）標(biāo)示對(duì)象內(nèi)文本的溢出。 對(duì)應(yīng)的腳本特性為textOverflow。
<div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; ">a b c d e f g h i j k l , msa sd sd sa w df f </div>
text-overflow屬性?xún)H是注解，當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記。并不具備其它的樣式屬性定義。我們想要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號(hào)的效果。還必須定義：強(qiáng)制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden）。只有這樣才能實(shí)現(xiàn)溢出文本顯示省略號(hào)的效果。
一、僅定義text-overflow:ellipsis; 不能實(shí)現(xiàn)省略號(hào)效果?！ ?/p>
二、定義text-overflow:ellipsis; white-space:nowrap; 同樣不能實(shí)現(xiàn)省略號(hào)效果?！ ?/p>
三、同時(shí)應(yīng)用：text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可實(shí)現(xiàn)所想要得到的溢出文本顯示省略號(hào)效果。
以上這篇強(qiáng)制文本在一行內(nèi)顯示,并且后面有省略號(hào)效果的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
原文地址：http://blog.csdn.net/fanhaiwang520/article/details/7990758
相關(guān)文章
CSS實(shí)現(xiàn)標(biāo)題文字過(guò)長(zhǎng)部分顯示省略號(hào)的方法
這篇文章主要介紹了CSS實(shí)現(xiàn)標(biāo)題文字過(guò)長(zhǎng)部分顯示省略號(hào)的方法,并且講解了針對(duì)單行文字溢出和多行文字溢出的情況,需要的朋友可以參考下2016-05-27CSS文本超出指定寬度后隱藏并顯示為省略號(hào)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇CSS文本超出指定寬度后隱藏并顯示為省略號(hào)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-24表格單元格內(nèi)容超出時(shí)顯示省略號(hào)效果(實(shí)現(xiàn)代碼)
下面小編就為大家?guī)?lái)一篇表格單元格內(nèi)容超出時(shí)顯示省略號(hào)效果(實(shí)現(xiàn)代碼)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-12CSS控制文本超出指定寬度顯示省略號(hào)和文本不換行效果的實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇CSS控制文本超出指定寬度顯示省略號(hào)和文本不換行效果的實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05- 這篇文章主要介紹了CSS超出文本指定寬度用省略號(hào)代替和文本不換行的相關(guān)資料，小編覺(jué)的實(shí)用性非常，特此分享到腳本之家平臺(tái)，供大家參考2016-05-05
CSS自動(dòng)換行、強(qiáng)制不換行、強(qiáng)制斷行、超出顯示省略號(hào)
這篇文章主要介紹了CSS自動(dòng)換行、強(qiáng)制不換行、強(qiáng)制斷行、超出顯示省略號(hào)的相關(guān)資料,需要的朋友可以參考下2016-04-26CSS控制文本的長(zhǎng)度 超過(guò)一行顯示省略號(hào)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇CSS控制文本的長(zhǎng)度 超過(guò)一行顯示省略號(hào)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-15