在 Chrome 中,我可以使用 <wbr>
的组合来指定我希望文本换行的位置和 white-space: nowrap;
.但在 Firefox 或 IE 中,文本直接从框内流出,<wbr>
被忽略。 Chrome 是否正确解释了规范,或者这只是一个古怪的(如果有用的话)实现错误?是否有文本换行提示的跨浏览器解决方案?
.headline-container {
width: 50%;
border: 1px solid red;
}
h1 {
white-space: nowrap;
}
@media (max-width: 400px) {
h1 {
white-space: normal;
}
}
<div class="headline-container">
<h1>This headline could <wbr>wrap in the middle <wbr>but only on Chrome</h1>
</div>
This answer有同样的问题——它在 Firefox 中对我不起作用。
最佳答案
这是@CBroe 建议的实现 ...
.headline-container {
width: 70%;
border: 1px solid red;
}
.h1-line {
display: inline-block;
}
@media (max-width: 400px) {
.h1-line {
display: inline;
}
}
<div class="headline-container">
<h1><span class="h1-line">This headline could</span> <span class="h1-line">wrap in the middle</span></h1>
</div>
关于css - 跨浏览器提示分词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41830292/