我在 flexbox 元素 .learn--text
中有一个文本需要垂直居中,但是 word-break: break-word
规则不起作用。
这是当前状态
和期望的状态
.learn {
display: flex;
flex: 0 0 50px;
margin-top: auto;
align-items: stretch;
height: 50px;
border: 1px solid black;
width: 250px;
}
.learn--icon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
}
.learn--text {
display: flex;
flex-wrap: wrap;
align-items: center;
flex: 1;
padding: 0 6px;
white-space: break-spaces;
word-break: break-word;
}
<div class="learn"><div class="learn--icon">icon</div><span class="learn--text"><a href="#">Learn more</a> about content management →
</span></div>
最佳答案
从 learn--text
中删除所有 flex 设置 - 它们将其内容“划分”为两部分,即链接和后续文本,将它们视为 flex 元素,因此视为单元。如果你擦掉它,结果如下:
.learn {
display: flex;
flex: 0 0 50px;
margin-top: auto;
align-items: center;
height: 50px;
border: 1px solid black;
width: 250px;
}
.learn--icon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
}
.learn--text {
padding: 0 6px;
white-space: break-spaces;
word-break: break-word;
}
<div class="learn"><div class="learn--icon">icon</div><span class="learn--text"><a href="#">Learn more</a> about content management →
</span></div>
关于html - 断字 : break-word doesn't work in flexbox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69981157/