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>
对齐中心。
答案 0 :(得分:1)
在您的示例中,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>