CSS3屬性中的text-overflow:ellipsis詳解
發(fā)布時間：2023-08-07 16:01:15 作者：要努力奮斗鴨 
我要評論
我要評論這篇文章主要介紹了CSS3屬性中的text-overflow:ellipsis詳解,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
語法：
text-overflow:clip | ellipsis
默認值為clip 不顯示省略標記
clip:當前對象內(nèi)文本溢出時不顯示省略標記,而是將溢出部分裁剪。
ellipsis:當對象內(nèi)文本一處時顯示省略標記(...)。
一、常見的單行文本溢出顯示省略寫法：
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瀏覽器有一個-webkit-line-clamp的屬性，用這個即可以實現(xiàn)webkit內(nèi)核的瀏覽器、以及大部分移動端的多行文本溢出省略號；
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>其它瀏覽器的話就需要通過js實現(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css3中通過transition屬性可以實現(xiàn)一些簡單的動畫過渡效果，今天通過本文給大家介紹下css3中transition屬性的示例代碼，感興趣的朋友跟隨小編一起看看吧2022-02-18- 在CSS3中，可以利用transform功能實現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動這4中類型的變形處理。本文就詳細的介紹了這4種實現(xiàn)，感興趣的可以了解一下2021-08-05
- 這篇文章主要介紹了css3 filter屬性的使用簡介，幫助大家更好的理解和學(xué)習(xí)使用css3，感興趣的朋友可以了解下2021-03-30
- 這篇文章主要介紹了詳解CSS3：overflow屬性的相關(guān)資料，幫助大家更好的理解和制作CSS3特效，感興趣的朋友可以了解下2020-11-17
這篇文章主要介紹了background屬性的8個屬性值(面試題)，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-11-02
