第一次写,感觉以后可能用简书来记录下会好点.
这次是记录一个纯css实现的 固定高度的div中文本溢出的动态出现省略号
html随意
<div class="wrap">
<div class="text">关于你。就是因为我的害怕，我亲眼看你走向她。我喜欢你是事实，你有[女朋友]也是事实。我以为我不说出口就会保持这样的朋友关系，却还是她赶了个巧，那应该是个寒假，你有女朋友了，我还是听说，我那么爱，却还是无果。于是我和她之间就莫名其妙的就多少有了敌人的[感觉]，或许就是别人口中的那样，世界上完全不相干的两个[女人]，会因为一个男人要么很友好，要么是仇恨。关于她我做不到友好，但也不是仇恨，只是你选择了她，我就[希望]她好好爱你，照顾你，连我的份也一起爱了。自爱上你的那天起，[思念]便成了戒不掉的瘾。你的一言一笑，一颦一蹙，无不牵动我的心，百千尘思，唯念一缕；万千红颜，唯恋一人。我愿意一生漂泊浪迹在你的[故事]里，甘愿为你鞍前马后，马首是瞻，即使你从未给我一句承诺，即使你从未给我半分[爱情]，依然无悔无怨。
</div>
</div>
css
.wrap {
height: 40px;
line-height: 20px;
overflow: hidden;
position: relative;
}
.wrap .text {
float: right;
margin-left: -5px;
width: 100%;
word-break: break-all;
}
.wrap::before {
float: left;
width: 5px;
content: '';
height: 40px;
}
.wrap::after {
float: right;
content: "...";
height: 20px;
line-height: 20px;
width: 3em;
margin-left: -3em;
position: relative;
left: 100%;
top: -20px;
padding-right: 5px;
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(0, white));
}
微信图片_20181112104750.png
差不多这种效果,只不过还是会存在屏幕宽度在一定时,出现文字拦截一半的问题..
微信图片_20181112104931.png
要完全实现溢出文字的动态省略,还是需要用js做文字监听,做字数的控制拦截 替换 增加...,效果会最好点
稍微讲下原理吧,原理还是比较有趣的
主要是利用float结构
我把两个伪元素加上背景色,red是before,blue是after
微信图片_20181112105852.png
另外把文本也调整了width,可以更清晰的看到,这个float布局,当text的高度大于before的高度时,after就会沉到before下方
再来看下,如果text的高度小于before的情况下:
微信图片_20181112110420.png
就能发现这种情况下,因为after也是float:right的(我这里特地调整了text的width,好让after的位置更明显),所以它会贴在text的左边,这就意味着你只要让after加上一个left:100%,就可以在text不超出父级div高度的时候,让after出现在div外部,一个overflow:hidden让它隐藏起来,当text超出父级高度时,after就会被挤到before的下面,因为left:100%,所以让after出现在了最右边,再利用top的定位,让after始终在div的最后
微信图片_20181112112038.png
形成最终的效果
*这里有个点,就是float:right,left:0是在div的右边为0点,和正常的相反,但是 +100%的移动还是往右的正方向移动,所以才会形成
微信图片_20181112115252.png
这种text小于或者等于div高度的时候,after(这里是left:0)出现在这个位置,left:100%时就会往右移动100%消失,
然后当text大于div高度的时候,after由于会被挤到before下面
微信图片_20181112115554.png
此时的after(left:0)就到了这个位置,如果是left:100%,则会出现到了最右边.
所以布局定位真的是个很神奇好玩的东西
ps:after还有个margin-left: -3em的点没说,主要是利用-一个本身宽度,来达到两个float不换行的目的.这个可以自己试一下
网友评论