css實(shí)現(xiàn)文本溢出顯示省略號(hào)
發(fā)布時(shí)間：2014-12-23 17:02:39 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了css實(shí)現(xiàn)文本溢出顯示省略號(hào)的方法和示例分享，推薦給大家。
復(fù)制代碼
代碼如下:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5標(biāo)簽</title>
<style>
p{
/**
white-space：nowrap;表示文本不會(huì)換行，在同一行繼續(xù)，知道遇到
標(biāo)簽為止；
overflow：hidden;不顯示超過對(duì)象尺寸的內(nèi)容，就是把超出的部分隱藏了；
text-overflow：ellipsis;當(dāng)文本對(duì)象溢出是顯示...，當(dāng)然也可是設(shè)置屬性為clip不顯示點(diǎn)點(diǎn)點(diǎn)；
-o-text-overflow:為了兼容opera瀏覽器;
*/
width:200px;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
white-space:nowrap;
}
div{
/*文字超出高度不顯示*/
overflow:hidden;
display:block;
height:60px;
width:100px;
}
</style>
</head>
<body>
<p>這樣處理對(duì)搜索引擎更友好，因?yàn)闃?biāo)題實(shí)際上并未被截字，而是局限于寬度而未被顯示而已。</p>
<div>這樣處理對(duì)搜索引擎更友好，因?yàn)闃?biāo)題實(shí)際上并未被截字，而是局限于寬度而未被顯示而已。</div>
</body>
</html>
相關(guān)文章
css實(shí)現(xiàn)單行文本溢出顯示省略號(hào)的示例代碼
這篇文章主要給大家介紹了使用CSS中的text-overflow屬性來實(shí)現(xiàn)單行文本溢出顯示省略號(hào),文章中有詳細(xì)的實(shí)現(xiàn)代碼，感興趣的同學(xué)可以自己動(dòng)手嘗試一下2023-09-07
純CSS實(shí)現(xiàn)“文本溢出截?cái)嗍÷浴钡膸追N方法
這篇文章主要介紹了純CSS實(shí)現(xiàn)“文本溢出截?cái)嗍÷浴钡膸追N方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2020-03-30
在實(shí)際開發(fā)的過程中，內(nèi)容溢出是經(jīng)常見到的。這篇文章主要介紹了淺談css溢出機(jī)制探究，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-18css多行文本溢出時(shí)出現(xiàn)省略號(hào)的示例
這篇文章主要介紹了css多行文本溢出時(shí)出現(xiàn)省略號(hào)的示例的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-13
本篇文章主要介紹了純CSS定制文本省略的方法大全，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-16css實(shí)現(xiàn)li中文本超出行寬自動(dòng)隱藏
li中的文本超出行寬自動(dòng)隱藏，在一些新聞?lì)惖牧斜響?yīng)用中還是比較實(shí)用的，具體的實(shí)現(xiàn)css樣式如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-09-29css overflow溢出隱藏(文字溢出時(shí)的自動(dòng)隱藏處理)
css溢出隱藏一般用于當(dāng)內(nèi)容太大以至于無法適應(yīng)指定的區(qū)域時(shí)，通過設(shè)置css下的overflow屬性來隱藏其內(nèi)容2013-03-07標(biāo)題長(zhǎng)度溢出時(shí)，自動(dòng)顯示為省略“...”的Css text-overflow
內(nèi)容超出后自動(dòng)隱藏并加省略標(biāo)記(...)引號(hào)的Css text-overflow:ellipsis; o...2011-07-27CSS教程:關(guān)于文字溢出問題的研究-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
首先引起對(duì)這個(gè)溢出問題進(jìn)行研究是因?yàn)榭吹揭粋€(gè)朋友的帖子，里面提到ie7下出現(xiàn)的文字溢出問題； 于是又重新翻了以前懌飛斑竹的帖子，他提到的是注釋引起的文字溢出問題2008-10-17- 設(shè)置text-overflow: ellipsis;即可實(shí)現(xiàn)文本溢出省略的效果，本文主要介紹了CSS 文字溢出:ellipsis在IE上不起效果的解決，具有一定的參考價(jià)值，感興趣的可以了解一下2023-11-23
