CSS文字溢出问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*文字溢出问题*/
.wordNowrap {
width: 50%;
height: 500px;
margin: 0 auto;
background: tan;
}
/*单行溢出···*/
.singleLine {
width: 300px;
height: 50px;
background: teal;
/*单行溢出···*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*多行溢出···*/
.moreLine {
width: 00px;
height: 60px;
line-height: 30px;
/*将height的高度值设置为line-height的值的2倍 以防多出的文字漏出*/
background: paleturquoise;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.moreLine_box{
width: 360px;
height: 60px;
}
/*多行后面···虚化*/
.moreLine_after {
width: 360px;
/*将height的高度值设置为line-height的值的2倍 以防多出的文字漏出*/
height: 60px;
line-height: 30px;
overflow: hidden;
position: relative;
background: #fff;
padding: 30px;
}
.moreLine_after::after {
position: absolute;
content: "...";
bottom: 0;
right: 20px;
background: linear-gradient(left, transparent, #eee 55%);
background: -webkit-linear-gradient(left, transparent, #eee 55%);
background: -moz-repeating-linear-gradient(left, transparent, #eee 55%);
background: -moz-repeating-linear-gradient(left, transparent, #eee 55%);
padding-left: 20px;
}
</style>
</head>
<body>
<div class="wordNowrap">
<h2>文字溢出处理</h2>
<p class="singleLine">单行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二</p>
<p class="moreLine">
多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二
</p>
<div class="moreLine_box">
<p class="moreLine_after">
多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二
</p>
</div>
</div>
</body>
</html> 解压密码： detechn或detechn.com
免责声明
本站所有资源出自互联网收集整理，本站不参与制作，如果侵犯了您的合法权益，请联系本站我们会及时删除。
本站发布资源来源于互联网，可能存在水印或者引流等信息，请用户自行鉴别，做一个有主见和判断力的用户。
本站资源仅供研究、学习交流之用，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担。
