How to wrap text in AngularJS with CSS?

Question

This should be an easy answer but I'm not getting it here.

<span ng-show="myResults !=null && !isShowDetails" class="yourScore">
  YOUR SCORE (best 4) : {{myResults.fullSumBest}} pts - total: {{user.userScore}} pts 
  <span style="float:right"  ng-click="showDetails()">
     [ + ] show details 
  </span>
</span>

When I resize the screen down the text doesn't overflow it just gives me ... and cuts off the text and the score.

Things I've tried off the top of my head:

  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;

I'd prefer not use @media here to lower the font size unless absolutely needed. Ideally it would just wrap down to the line below.

Answer 1

This worked perfect. It had inherited this from Ion-item

white-space: none;

and I just needed to add this to the class for the span:

white-space: normal;