小編給大家分享一下css如何設(shè)置文字超出省略號,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)成立十年來,這條路我們正越走越好,積累了技術(shù)與客戶資源,形成了良好的口碑。為客戶提供做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)頁設(shè)計、空間域名、網(wǎng)絡(luò)營銷、VI設(shè)計、網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。網(wǎng)站是否美觀、功能強(qiáng)大、用戶體驗好、性價比高、打開快等等,這些對于網(wǎng)站建設(shè)都非常重要,創(chuàng)新互聯(lián)通過對建站技術(shù)性的掌握、對創(chuàng)意設(shè)計的研究為客戶提供一站式互聯(lián)網(wǎng)解決方案,攜手廣大客戶,共同發(fā)展進(jìn)步。
css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言,主要是用來設(shè)計網(wǎng)頁的樣式,使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言,并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件中,而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定,從而實現(xiàn)級聯(lián)效果,發(fā)展至今,css不僅能裝飾網(wǎng)頁,也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。
方法:首先使用“overflow:hidden”語句,設(shè)置內(nèi)容超出后隱藏;然后使用“text-overflow:ellipsis”語句,設(shè)置內(nèi)容超出顯示為省略號;最后使用“white-space:nowrap”語句,設(shè)置文本不進(jìn)行換行即可。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
新建一個html頁面,在html代碼頁面找到
標(biāo)簽,在標(biāo)簽里創(chuàng)建一個標(biāo)簽,然后輸入顯示的內(nèi)容并添加一個class類為 class="cont"。找到
訂單的的頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂
保存好代碼,使用瀏覽器打開html文件查看效果,發(fā)現(xiàn)內(nèi)容并沒有隱藏,原因是沒有設(shè)置內(nèi)容的高度。
設(shè)置內(nèi)容顯示為一行,內(nèi)容超出后顯示為省略號。為cont類添加內(nèi)容顯示為一行:white-space: nowrap; ,內(nèi)容超出后顯示為省略號:text-overflow: ellipsis; (注意:white-space: nowrap;和text-overflow: ellipsis;要同時使用才能顯示為省略號)。
保存好代碼后使用瀏覽器打開查看內(nèi)容超出后顯示為省略號的效果。
以上是“css如何設(shè)置文字超出省略號”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!