CODEWITHSUNDEEP
javascripthtmlcssangularjs
GarrettJMU
GarrettJMU

Reputation: 185

How to wrap text in AngularJS with CSS?

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.

Upvotes: 3

Views: 13312

Answers (2)

GarrettJMU
GarrettJMU

Reputation: 185

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;

Upvotes: 3

Naren Murali
Naren Murali

Reputation: 56054

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>

Upvotes: 0

Related Questions