Ionic-framework: Long text in buttons not being truncated

Created on 14 Oct 2016 · 3Comments · Source: ionic-team/ionic-framework

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

core feature request

Source

alan-agius4

👍2

Most helpful comment

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.

```

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

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

ncapito on 28 Nov 2016

👍3 🎉1

All 3 comments

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.

```

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

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

ncapito on 28 Nov 2016

👍3 🎉1

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.

brandyscarney on 5 Dec 2016

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!