Question

在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中不起作用。

Answer 1

这是@CBroe建议的实施......

＆＃13;

.headline-container {
  width: 70%;
  border: 1px solid red;
}
.h1-line {
  display: inline-block;
}
@media (max-width: 400px) {
  .h1-line {
    display: inline;
  }
}

＆＃13;

<div class="headline-container">
  <h1><span class="h1-line">This headline could</span> <span class="h1-line">wrap in the middle</span></h1>
</div>

＆＃13;

跨浏览器提示单词

1 个答案: