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.

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.

• javascript
• html
• css
• angularjs

Share Improve this question Follow edited Sep 1, 2017 at 19:00 georgeawg 49k1313 gold badges7777 silver badges9898 bronze badges asked Sep 1, 2017 at 18:38 GarrettJMUGarrettJMU 18511 gold badge22 silver badges1212 bronze badges 2

• To float a span you must set it (at least) to display: inline-block, since default for span's is inline – Jonathan Commented Sep 1, 2017 at 18:41
• By doing that it gets rid of the ... but is still taking off text off the screen. – GarrettJMU Commented Sep 1, 2017 at 18:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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;

I think that this is what you need.

So in the below example I tried simulating what I thought might be the problem. I am using the angular filter limitTo to restrict the length of the characters, if you want to change this length, all you need to do is change the value of the 15 in the below code to your desired length. I also added some extra code, please either use it or ignore it, for the layout issue. I set the parent span to position:relative;display:block so that it will take the entire width of the window, the second child span I gave position:absolute;top:0px;right:0px; so that it gets fixed on the right side, finally I added the CSS display:block;padding-right; to the first child span, so that it takes the entire width, and the padding is to take into account the absolute positioned span. Please let me know if this fixes your issue.

JSFiddle Demo

HTML:

<div ng-controller='MyController' ng-app="myApp">
    <span style="position:relative;display:block;" ng-show="myResults !=null && !isShowDetails" class="yourScore">
    <span style="position:relative;display:block;padding-right:120px;">{{'YOUR SCORE (best 4) : '+myResults.fullSumBest+' pts - total: '+user.userScore+' pts' | limitTo : limit}}</span>

      <span style="position:absolute;top:0px;right:0px;" ng-init="bool = false;limit=15;" ng-click="bool=!bool;limit=bool ? 100000 : 15">
         {{bool ? '[ + ] hide details ' : '[ + ] show details '}}
      </span>
    </span>
</div>