|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 有時候在設計網頁的時候可能會遇到文本太長而導致頁面不太美觀,那么如何來解決這個問題呢?本篇文章將給大家來介紹關于css文本單行超出省略號以及多行文本超出省略號的實現方法。首先我們來看一看css實現單行文本超出省略號的方法。 css實現單行文本的溢出顯示省略號應該用text-overflow:ellipsis屬性來,當然還需要加寬度width屬來兼容部分瀏覽。 css單行文本超出省略號的實現代碼: <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>省略號 test</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:10px;
font-family:Arial;
}
#test {
position:relative;
width:150px;
height:20px;
line-height:20px;
text-overflow:ellipsis;
white-space:nowrap;
*white-space:nowrap;
overflow:hidden;
border:1px solid #999;
}
#test span{
position:absolute;
top:0;
right:0;
display:block;
float:left;
}
</style>
</head>
<body>
<div id="test">php中文網php中文網php中文網php中文網php中文網php中文網php中文網</div>
</body>
</html>css單行文本超出省略號的效果如下:
text-overflow:ellipsis屬性只支持單行文本的溢出顯示省略號,如果我們要實現多行文本溢出顯示省略號呢?下面我們就繼續說css實現多行文本超出省略號的方法。(text-overflow:ellipsis屬性更多內容可參考css手冊) 1、css實現多行文本超出省略號之直接用css屬性設置(只有-webkit內核才有作用) 語法: overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 移動端瀏覽器絕大部分是WebKit內核的,所以該方法適用于移動端; -webkit-line-clamp 用來限制在一個塊元素顯示的文本的行數,這是一個不規范的屬性(unsupported WebKit property),它沒有出現在 CSS 規范草案中。 display: -webkit-box 將對象作為彈性伸縮盒子模型顯示 。 -webkit-box-orient 設置或檢索伸縮盒對象的子元素的排列方式 。 text-overflow: ellipsis 以用來多行文本的情況下,用省略號“…”隱藏超出范圍的文本。 2、css實現多行文本超出省略號之利用絕對定位和padding;(跨瀏覽器解決方案) 語法: p{
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
}
p::after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}這個方法的原理是:首先在包含文字的元素里,嵌入一個<span>...</span>,然后包含文字的元素右側留出...的位置(padding-right),最后利用絕對定位將...定位至右側的padding-right區域。 注意: 將height設置為line-height的整數倍,防止超出的文字露出。 給p::after添加漸變背景可避免文字只顯示一半。 由于ie6-7不顯示content內容,所以要添加標簽兼容ie6-7(如:<span>…<span/>);兼容ie8需要將::after替換成:after。 本篇文章到這里就結束了,更多關于css文本超出省略號的內容可以關注php中文網。 以上就是css文本單行超出和多行超出省略號分別如何實現?的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!