如何解决允许换行而不换行其他元素?
使用Bootstrap 4 ...
<th scope="col">
<a href="#">Error details</a>
<i class="fas fa-chevron-down fa-sm"></i>
</th>
有没有一种方法,无论是否有flexbox,都能使人字形正确对齐?
要求
- 必须允许文本换行
- 文字不应该总是自动换行(例如 flex-shrink)
- 空间不应超过图片所示的空间 在“错误详细信息”文本和人字形之间
解决方法
我们可以在容器中添加一些padding
,以便为人字形空间腾出空间,然后在人字形上使用position: absolute
,
<th style="position: relative; padding-right: 14px">
<a href='#'>Invalid value</a>
<i
class="fas fa-chevron-down fa-sm"
style="position: absolute; top: 50%; margin-left: 14px; transform: translate(0,-50%)">
</i>
</th>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。