实现功能：
1.多行文本溢出显示省略号
2.缩放时单行文本溢出提示，不溢出不提示
3.鼠标滑过无线滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body{
}
/*1.单行和多行文本显示省略号*/
.parent{
margin: 20px 0;
width: 600px;
line-height: 28px;
font-size: 14px;
}
.parent .child1{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.parent .child2{
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
}
/*2.缩放时单行文本溢出提示，不溢出不提示-方法一*/
.container {
margin: 20px 0;
width: 100%;
line-height: 28px;
font-size: 14px;
overflow: hidden;
height: 28px;
}
.container .content1,
.container .content2 {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.container .content1 {
position: relative;
z-index: -1;
}
.container .content2 {
background: yellow;
margin-top: -56px;
z-index: 1;
-webkit-line-clamp: 1;
}
/*3.缩放时单行文本溢出提示，不溢出不提示-方法二*/
.wrap{
line-height: 1.5;
height: 1.5em;
overflow: hidden;
font-size: 14px;
}
.wrap .txt{
display: block;
max-height: 3em;/*最大高度为2行*/
padding-right: 20px;/*解决显示省略号时，最后边的省略号和底部的字重合的问题*/
}
.wrap .title{
position: relative;
top: -3em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
width: 100%;
}
/*4.鼠标滑过无线滚动*/
.box{
width: 500px;
line-height: 28px;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
}
.box .title{
display: inline-block;
}
.box .title::after{
content: attr(data-title);
}
/*每10s向左平移50%然后回到起点，无线循环*/
.box .title:hover{
animation: move 10s 0.5s linear infinite;
}
@keyframes move{
/*from{
transform: translateX(0%);
}*/
to{
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<p>1.单行多行溢出显示省略号：</p>
<div class="parent">
<p class="child1">1.这是单行溢出显示省略号-这是单行溢出显示省略号-这是单行溢出显示省略号-这是单行溢出显示省略号-这是单行溢出显示省略号-这是单行溢出显示省略号-这是单行溢出显示省略号-</p>
<p class="child2">2.这是多行溢出显示省略号-这是多行溢出显示省略号-这是多行溢出显示省略号-这是多行溢出显示省略号-这是多行溢出显示省略号-这是多行溢出显示省略号-这是多行溢出显示省略号-这是多行溢出显示省略号-这是多行溢出显示省略号-这是多行溢出显示省略号-这是多行溢出显示省略号-</p>
</div>
<p>2.模拟溢出显示省略号时显示title提示：</p>
<div class="container">
<p class="content1">这是A文本没有title提示，这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本</p>
<p class="content2" title="123123123123">
这是B文本,有title提示，这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本
</p>
</div>
<p>3.模拟溢出显示省略号时显示title提示-方法二：</p>
<p class="wrap">
<span class="txt">元素会被移出正常文档流，并不为元素预留。元素会被移出正常文档流，并不为元素预留。元素会被移出正常文档流，并不为元素预留。元素会被移出正常文档流，并不为元素预留。</span>
<span class="title" title="元素会被移出正常文档流，并不为元素预留">元素会被移出正常文档流，并不为元素预留。元素会被移出正常文档流，并不为元素预留。元素会被移出正常文档流，并不为元素预留。元素会被移出正常文档流，并不为元素预留。</span>
</p>
<p>4.鼠标滑过无线滚动：</p>
<div class="box">
<div class="title" data-title="本文介绍了一种全新 CSS 自动判断多行文本的思路，并且带来3个人性化的小交互。">本文介绍了一种全新 CSS 自动判断多行文本的思路，并且带来3个人性化的小交互。</div>
</div>
</body>
</html>
效果图：
image.png
image.png
网友评论