如何在盒子模型中,未知长度的文本段落的最后 添加一个按钮或者图片 或者是字样(下拉,查看更多,下载等),并且始终居右显示,
使用场景如下 1 假设有一个div,宽度固定,里面放置的是text文本,但是现在有一个需求 就是要在文本的最后加一个下载,或者查看更多的字样,或者是其他的元素,并且始终在盒子的最右边显示。
调研了很多办法,可能是自己对css不够熟练。一直未能解决,但是这个需求貌似在开发中很常见,最后想了一个可能会对页面性能造成影响对办法来解决,
解决还算完美,跟大家分享一下,代码如下:
原理就是 将所有对text 拆分为一个span,利用flex布局 跟 伪类来解决
<div>
<div className="aaa">
<span>我</span>
<span>有</span>
<span>一</span>
<span>个</span>
<span>小</span>
</div>
</div>
.aaa { width: 400px; background: skyblue; color: #333; text-align: left; display: flex; flex-wrap: wrap; font-size: 14px; &::after { background-color: red; content: '下载'; flex-grow: 1; flex-shrink: 0; text-align: right; margin-left: 20px; } }
网上看了一些办法,并没有满足我对需求,现在这个办法基本可以满足,就是性能可能会差一点。有好对意见,欢迎大家对我提点