button text wrapping in Angularjs

Question

Objective: I have a long text stored in a variable that I need to display as a text in a button. Since it is a long text, I wish to wrap it.
Example:
say the variable is $scope.buttonText, containg a long text(say 100 characters).
The button code (angular material is used) in the view is:

<md-button ng-click="someFunc()" style="width:300px;">
{{buttonText}}
</md-button>

The Expected Output is that the text in the button should wrap after 300px.
But the actual output of the above code is that the text is not wrapping after 300px. It just goes on and breaks the button. The spilled out text gets hidden.
Now, I have tried using the some CSS properties on it like white-space: normal; but it does not seem t work on the text at all.
I assume this is because the text is actually as a $scope variable.
Can someone help me in wrapping up the text in the button, which has a fixed width of 300px? Height is no issue.
A PLUNKR to regenerate the problem. please someone suggest changes.

Sachila Ranawaka · Accepted Answer · 2017-01-29 12:19:32Z

1

.appText {
    width: 280px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
      display: inline-block;
}

<button style="width:300px;">
<span class="appText">sssssssssssssssssssxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxsssssssssssssssss</span>
</button>

edited Jan 29, 2017 at 12:19

answered Jan 29, 2017 at 11:50

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

7 Comments

jAYANT YADAV Over a year ago

This CSS is not working... The text is still not wrapping :(

Sachila Ranawaka Over a year ago

please add display: inline-block; to appText class

jAYANT YADAV Over a year ago

still not working... i have made a plunkr... plz edit it : plunkr

Sachila Ranawaka Over a year ago

@jAYANT YADAV you need to add the 'appText' css class to html. replace button tag with this <button> <span class="appText">{{buttonText}} </span> </button>

jAYANT YADAV Over a year ago

sorry. I thought i had included it... But the text is still not wrapping... I have removed the overflow: hidden; and text-overflow: ellipsis; since i want to see the whole text in button

|

Collectives™ on Stack Overflow

button text wrapping in Angularjs

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related