CSS3屬性中的text-overflow:ellipsis詳解
發(fā)布時(shí)間：2023-08-07 16:01:15 作者：要努力奮斗鴨 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS3屬性中的text-overflow:ellipsis詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
語(yǔ)法：
text-overflow:clip | ellipsis
默認(rèn)值為clip 不顯示省略標(biāo)記
clip:當(dāng)前對(duì)象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記,而是將溢出部分裁剪。
ellipsis:當(dāng)對(duì)象內(nèi)文本一處時(shí)顯示省略標(biāo)記(...)。
一、常見(jiàn)的單行文本溢出顯示省略寫法：
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
.p{
width: 100px;
height: 40px;
line-height: 40px;
text-overflow: ellipsis; /*1*/
overflow: hidden; /*2*/
white-space: nowrap; /*3*/
word-break: break-all;
}
</style>
<body>
<p class="p">多行文本溢出顯示多行文本溢出顯示多行文本溢出顯示</p>
</body>
</html>二、多行文本溢出
WebKit瀏覽器有一個(gè)-webkit-line-clamp的屬性，用這個(gè)即可以實(shí)現(xiàn)webkit內(nèi)核的瀏覽器、以及大部分移動(dòng)端的多行文本溢出省略號(hào)；
display:-webkit-box;
-webkit-line-clamp: 3/*第幾行裁剪*/
-webkit-box-orient:vertical;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
.p {
height: 60px;
line-height: 30px;
width: 80px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box; /*1*/
-webkit-line-clamp: 2; /*2*//*第幾行裁剪*/
-webkit-box-orient: vertical; /*3*/
}
</style>
<body>
<p class="p">多行文本溢出顯示多行文本溢出顯示多行文本溢出顯示多行文本溢出顯示多示</p>
</body>
</html>其它瀏覽器的話就需要通過(guò)js實(shí)現(xiàn)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
div{
height: 60px;
}
p {
line-height: 30px;
width: 80px;
margin: 0 auto;
}
</style>
<body>
<div id="div">
<p id="p">多行文本溢出顯示多行文本溢出顯示多行文本溢行文本溢示</p>
</div>
</body>
<script type="text/javascript">
var eleH = document.getElementById("div").clientHeight;
var pEle = document.getElementById("p");
while(pEle.clientHeight > eleH) {
pEle.innerText = pEle.innerText.replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...");
};
</script>
</html>到此這篇關(guān)于CSS3屬性中的text-overflow:ellipsis詳解的文章就介紹到這了,更多相關(guān)css3 text-overflow:ellipsis屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css3中通過(guò)transition屬性可以實(shí)現(xiàn)一些簡(jiǎn)單的動(dòng)畫過(guò)渡效果，今天通過(guò)本文給大家介紹下css3中transition屬性的示例代碼，感興趣的朋友跟隨小編一起看看吧2022-02-18css3中transform屬性實(shí)現(xiàn)的4種功能
在CSS3中，可以利用transform功能實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動(dòng)這4中類型的變形處理。本文就詳細(xì)的介紹了這4種實(shí)現(xiàn)，感興趣的可以了解一下2021-08-05- 這篇文章主要介紹了css3 filter屬性的使用簡(jiǎn)介，幫助大家更好的理解和學(xué)習(xí)使用css3，感興趣的朋友可以了解下2021-03-30
- 這篇文章主要介紹了詳解CSS3：overflow屬性的相關(guān)資料，幫助大家更好的理解和制作CSS3特效，感興趣的朋友可以了解下2020-11-17
這篇文章主要介紹了background屬性的8個(gè)屬性值(面試題)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-11-02
