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.

To float a span you must set it (at least) to display: inline-block, since default for span's is inline — Jonathan
– 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
– GarrettJMU, Commented Sep 1, 2017 at 18:48

GarrettJMU · Accepted Answer · 2017-09-01 20:47:18Z

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;

answered Sep 1, 2017 at 20:47

GarrettJMU

1851 gold badge2 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naren Murali · Accepted Answer · 2017-09-01 20:36:50Z

0

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>

answered Sep 1, 2017 at 20:36

Naren Murali

66.3k6 gold badges51 silver badges97 bronze badges

2 Comments

GarrettJMU Over a year ago

I'll give this a shot as well but I found a better fix to just enter this into the class: white-space: normal;

GarrettJMU Over a year ago

Thank you! I'm not sure if it's the "better" fix until I do a little more responsive things. I'm still going to try yours out as well! Thank you!

Collectives™ on Stack Overflow

How to wrap text in AngularJS with CSS?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related