我有一个列表组件,其中包含一个定义为 before 伪元素的自定义元素符号:
li:before {
display: inline-flex;
width: .8rem;
height: .8rem;
margin-right: 1.5rem;
margin-left: -2.9rem;
background-color: #00c878;
border-radius: .375rem;
content: "";
}
只要 li 内容不会溢出容器,一切都可以正常工作。然后,整个内容只是向下跳了几个像素,并在元素符号和内容之间留下了一个奇怪的上边距。我重新创建了它 here .
我设法使用
work-break: break-all
让它消失了,但这当然不是一个可持续的解决方案。有小费吗?
最佳答案
这么多解决方案。但这个效果最好
请将位置设置为绝对 在伪元素上并删除边距。我的解决方案使用定位来自动正确排列包装线。
优点:
.container {
width:170px;
border:1px solid red;
}
ul {
margin: 0;
padding: 0;
}
li {
padding-left: 35px;
margin-bottom: 24px;
margin-top: 0;
font-size: 16px;
line-height: 24px;
list-style-type: none;
position:relative;
word-break: break-all;
}
li::before {
width: 4px;
height: 4px;
background-color: #00c878;
border-radius: 375px;
content: "";
position: absolute;
left: 10px;
top: 9px;
}
<div class="container">
<div class="list unordered">
<h3 class="text-grey-150 h5 "> Branchen ETFs </h3>
<ul class="">
<li>Technologie ETF
<br>
</li>
<li style="/* word-break: break-all; */">Finanzdienstleistungen ETF</li>
<li>Gesundheitswesen ETF
<br>
</li>
<li>Immobilien ETF
<br>
</li>
<li>Industrie ETF</li>
</ul>
</div>
</div>
关于html - 当 li 元素文本在::before 之后溢出时出现意外的顶部空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63792579/