bug: long text with max width not truncating in button

[alan-agius4]

Short description of the problem:

Long text in buttons is not being truncated. I am using full and block buttons

While the button does have the ellipsis, as show below;

.button {
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

This doesn't work, as the .button-inner class has display: flex

What behaviour are you expecting?

Display ellipsis.

This can be done by setting the display of .button-inner to inline. However, I don't really know the reason for it's display being flex.

Which Ionic Version? 2 RC.0

[ncapito]

I think the flex is there to help with centering? Not sure how you all would want to fix it, but the only way I have been able to fix something like this is to give it another inner child. e.g.

<button ion-button full block>
  <span class='overflow-me'>button[ion-button][block] with other really long text that will cause an overflow</span>
 </button>

I then put a class on .overflow-me to do the ellipsis.

   .overflow-me{
    overflow: hidden;
    text-overflow: ellipsis;
   }

[brandyscarney]

This is actually pretty complex since buttons are used in so many components. Adding an inner div to buttons would cause issues elsewhere, and changing the display from flex to inline causes issues with buttons containing icons and anchor links styled to look like buttons. I am going to remove this from the milestone for now since the code above by @ncapito works, but I'll revisit this issue.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!

[mapsandapps]

Thank you for submitting this issue.

Starting in Ionic Framework 7.2, we encouraged developers to opt in to text wrapping in buttons by setting ion-text-wrap. This is available now if you are on Ionic 7.2+.

As a result of the changes merged in #28682, text wrapping of buttons will be the default behavior starting in Ionic version 8.