Cross-browser hinting for word break

Question

In Chrome, I can specify where I want my text to wrap with a combination of <wbr> and white-space: nowrap;. But in Firefox or IE the text just flows out of the box and <wbr> is ignored. Is Chrome interpreting the spec properly or is this just a quirky, if useful, implementation bug? Is there a cross-browser solution for text-wrap hinting?

.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 has the same problem—it doesn't work in Firefox for me.

I’d do away with the white-space:nowrap, and instead wrap each of the parts you want to stay “together” in a span and make them inline-block. — CBroe, Jan 24 '17 at 14:14
Seems like a good idea. A bit verbose since span needs to enclose the text, https://codepen.io/mburchwsj/pen/KaqYLK but I think it works. — Martin Burch, Jan 24 '17 at 14:23

score 1 · Accepted Answer · answered Jan 24 '17 at 18:14

Here's an implementation of a suggestion from @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>

Cross-browser hinting for word break

1 Answers1