HTML:
<nav>
<span>
<h3>123</h3>
<h3>111111111111111111111111111111111111111111111111111111111111</h3>
</span>
</nav>
SCSS:
nav {
width: 100%;
display: flex;
justify-content: center;
span {
display: inline-flex;
align-items: center;
h3 {
overflow: hidden;
max-width: 30%;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 1em;
}
}
}
这里的代码:
https://codepen.io/arkceajin/pen/bKNOwX
可能会看到
<span>
内部的不可见区域,如果增加文本内容,它将扩大。预期结果:使
<span>
在<nav>
中居中。 最佳答案
在您的示例中,span
是一个伸缩容器-因此,如果您想将其子级沿主轴居中,则它应该具有justify-content: center
。
nav {
width: 100%;
display: flex;
}
nav span {
display: inline-flex;
border: 1px solid blue;
justify-content: center;
}
nav span h3 {
border: 1px solid red;
overflow: hidden;
max-width: 30%;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 1em;
}
<nav>
<span>
<h3>123</h3>
<h3>111111111111111111111111111111111111111111111111111111111111</h3>
</span>
</nav>
关于css - 如何防止父项被隐藏的子文本溢出?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50616577/