我们浏览网页中经常看到在导航页面的缩略图下有一段介绍文字,
如下图箭头所指位置:
这张图中介绍文字只有一行,可以正常显示,
但是当描述文字过多时,由于空间放不下太多文字,那么超过的文字会怎么样呢?
一般我们可以用overflow:hidden,
但是这样的话超过的文字用户直接看不到了,
会误以为只有前面的内容,会造成断章取义的歧义.
在实际浏览网页时我们一般看到的是文本溢出部分变成了省略号,
如下图:
那么这种效果是如何实现的呢?
实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ellipsis {
/* 溢出隐藏 */
overflow: hidden;
/* 文本溢出换成省略号 */
text-overflow: ellipsis;
/* 弹性盒子 */
display: -webkit-box;
/* 溢出到第几行 */
-webkit-line-clamp: 2;
/* 从上到下垂直排列子元素 */
-webkit-box-orient: vertical;
}
.box{
width: 172px;
height: 32px;
font-size: 12px;
margin: 0 auto;
background-color: pink;
}
</style>
</head>
<body>
<div class="box ellipsis">
泡泡糖机里有那些口味？那些up主在美国品尝过的【猫和老鼠】美食
</body>
</html>实现效果图:
接下来我们一步步实现:
1.默认效果
2.加上overflow:hidden的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ellipsis {
/* 溢出隐藏 */
overflow: hidden;
}
.box{
width: 172px;
height: 32px;
font-size: 12px;
margin: 0 auto;
background-color: pink;
}
</style>
</head>
<body>
<div class="box ellipsis">
泡泡糖机里有那些口味？那些up主在美国品尝过的【猫和老鼠】美食
</body>
</html>3.加上 text-overflow: ellipsis( /* 文本溢出换成省略号 */);的效果
我们发现效果和上一步相同,文本溢出换成省略号效果并没有实现,
溢出文本并不在第二行,而是在第三行,如第一步的图,因此没有实现,
因此我们要想办法把第三行的文字想办法放在第二行.
4.最后实现
加上以下代码;
其中-webkit-line-clamp: 2;表示在第二行省略,如果有三行文字可以把数字改为3.
/* 弹性盒子 */
display: -webkit-box;
/* 溢出到第几行 */
-webkit-line-clamp: 2;
/* 从上到下垂直排列子元素 */
-webkit-box-orient: vertical;
效果实现:
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ellipsis {
/* 溢出隐藏 */
overflow: hidden;
/* 文本溢出换成省略号 */
text-overflow: ellipsis;
/* 弹性盒子 */
display: -webkit-box;
/* 溢出到第几行 */
-webkit-line-clamp: 2;
/* 从上到下垂直排列子元素 */
-webkit-box-orient: vertical;
}
.box {
width: 172px;
height: 32px;
font-size: 12px;
margin: 0 auto;
background-color: pink;
}
</style>
</head>
<body>
<div class="box ellipsis">
泡泡糖机里有那些口味？那些up主在美国品尝过的【猫和老鼠】美食
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看