html設定固定寬高，多餘文字顯示省略號
阿新 • • 發佈：2019-02-07
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK"></meta>
<style type="text/css">
/*
當行文字
#testDIV{
width:100px;
height:50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;/**不換行**/
border:1px solid #ddd;
}*/
/*多行文字*/
#testDIV{
border:1px solid #ddd;
width: 200px;
word-break: break-all;
text-overflow: ellipsis;/**顯示省略號**/
display: -webkit-box; /** 將物件作為伸縮盒子模型顯示 **/
-webkit-box-orient: vertical; /** 設定或檢索伸縮盒物件的子元素的排列方式 **/
-webkit-line-clamp: 4; /** 顯示的行數 **/
overflow: hidden; /** 隱藏超出的內容 **/
}
</style>
</head>
<body>
<div id="testDIV" >
</body>
</html>
<html>
<head>
<meta charset="GBK"></meta>
<style type="text/css">
/*
當行文字
#testDIV{
width:100px;
height:50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;/**不換行**/
border:1px solid #ddd;
}*/
/*多行文字*/
#testDIV{
border:1px solid #ddd;
width: 200px;
word-break: break-all;
text-overflow: ellipsis;/**顯示省略號**/
display: -webkit-box; /** 將物件作為伸縮盒子模型顯示 **/
-webkit-box-orient: vertical; /** 設定或檢索伸縮盒物件的子元素的排列方式 **/
-webkit-line-clamp: 4; /** 顯示的行數 **/
overflow: hidden; /** 隱藏超出的內容 **/
}
</style>
</head>
<body>
<div id="testDIV" >
法法師法法師法法師法法師法法師法法師法法師法法師法法師法法師法法師法法師法法師法法師法法師法法師
法法師法法師法法師法法師法法師法法師法法師法法師
法法師法法師法法師法法師法法師法法師法法師法法師
</body>
</html>