html - word-break:break-word 在 flexbox 中不起作用
问题描述
我在 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>
解决方案
擦除所有 flex 设置learn--text
- 他们将其内容“划分”为两部分,链接和以下文本,将它们视为 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>
推荐阅读
- kotlin - 是否有将 Lambda 记录为 KDoc 中的函数参数的约定?
- javascript - redux-form:如何在 Promise 中抛出新的 SubmissionError?
- .net - 针对远程 Active Directory 验证用户名
- constraint-programming - clp(Z) 与 Kiselyov 关系算术
- css - 滚动时在粘性表格列的右侧出现阴影
- python - 是否可以使用 Tkinter 滚动条控制 matplotlib 图?
- scala - 在 Scala 中实现传统基于循环的任务的最佳方式
- android - Android:如何使用 signInWithCustomToken 对 Firestore 进行身份验证并监听/观察特定集合中的文档更改
- laravel - Facebook OAuth 此 URL 的域未包含在应用程序的域中
- javascript - 阻止带有 chrome 扩展的 url,然后显示自定义页面