要求:
废话不用多说了直接上要求吧!
三行的时候省略,内容字数是不限的,内容文字是随机的,在内容末尾自动加上省略号,最后面增加展开按钮,并且希望展开和省略号之前有一定的间距。
目前暂时不需要考虑什么时候换行,展开后又怎么操作,现在只需要实现这样一个效果!
如果你现在正在看这篇文章,又恰好有一点空闲时间,你不妨试试怎么实现。
如果你做出来了,那么可以在评论区分享你的效果或者 show me your code!!
思路
为了不影响大家的思路,我把实现代码放到最后面,当然想看代码的可以直接跳到代码那一部分。
先分享一下我的思路吧,一开始看见这个效果的时候,我的内心是这样的。
我心想这不挺简单的,结果。。。还是我太菜了。。。
一开始看到我的首要想法是使用定位 ,我想着使用定位,定到右下角,完了再给文字背景改成白色,再增加一定的宽度盖住原来的文字不就实现了吗?确实是可以的,但是这样有一定的缺点,就是我们无法精准的盖住之前的文字,可能会有一半的情况比如这样:
文字相同的情况下对比一下正确的实现效果:
相信聪明的童鞋已经看出哪不对劲了,确实使用定位是有一些不精准的,那有的同学会说我再加宽一下正好盖住不就行了,我想说这样的话总有盖不住的时候。
代码实现
那经过上面的实验我们已经知道定位实现不了,那应该怎么办呢?
在现在 flex 如此流行的今天相信大家已经忘记了还有一种布局方式,那就是float。
什么是float?
看完这张图大家应该恍然大悟了吧。
那如果只使用浮动,初级目标已经实现了,我们如何放到第三行右下角呢?
我们知道如果我们同时写了两个浮动元素,并且给他们分别清楚浮动之后的效果是这样的:
这样基本已经实现了,但是我们并不想看到上面的浮动,只想看到展开,这里有两种方法,一种是给浮动的宽度设置为0,另一种是给外层元素添加伪元素,宽度同样为0,这两个效果一致,只不过后者不会在页面中多写一个标签。
//前者
.open {
float: right;
width: 0;
height: calc(100% - 28px);
clear: both;
}
//后者
.outerElement::before {
content: '';
background-color: yellow;
float: right;
height: calc(100% - 28px);
}
总结
之所以分享这个效果,一是是觉得挺有意思的,二是也是感慨目前随着前端技术的发展,一些新技术慢慢已经取代了老技术,就比如 flex 和 float,我们在工作中可能更多的是使用 flex 进行布局,而慢慢的忽视了 float,而真正需要 float 登场的时候,又想不起来要去使用它了。
源码
<!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>
html,
body {
height: 100%;
}
.outerElement {
width: 600px;
height: 100%;
max-height: 80px;
overflow: hidden;
line-height: 1.6;
position: relative;
overflow: hidden; /*必须结合的属性,当内容溢出元素框时发生的事情*/
text-overflow: ellipsis; /*可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。*/
display: -webkit-box; /*必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。*/
-webkit-line-clamp: 3; /*用来限制在一个块元素显示的文本的行数。*/
-webkit-box-orient: vertical; /*必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。*/
}
.outerElement::before {
content: '';
background-color: yellow;
float: right;
height: calc(100% - 28px);
}
.open {
float: right;
clear: both;
margin-left: 7px;
padding-left: 0;
font-size: 15px;
color: #2a3aff;
}
</style>
</head>
<body>
<div class="outerElement">
<div class="open">展开</div>
对目前的知识星球来说,一个个星球是创作者和用户们的领地,有时候,在地球解决不了的问题,可以抛向星空,或许来自火星或者月亮的人看见了,就解决了。111111
如果星球和星空能够互补,后续陆续会做上网页版,也会结合知识星球的App进行迭代在星空回答过问题,用户能访问到你的星球。觉得开星球太重,可以先到星空感受感受气氛。
</div>
</body>
</html>
<script></script>