Ionic Header be three dots on Android

I use ionic-header, on android device, header be trim and replace by 3 dots. On iOS, this issue isn’t occurring.
HTML

<ion-header-bar class="navbar">
    <h2>EDIT BUSINESS</h2>
</ion-header-bar>

CSS

.navbar h2 {
text-align: center;
font-size: 17px;
padding-top: 12px;
line-height: 17px;;
max-width: 69%;
text-overflow: ellipsis;
overflow: hidden;
display: block;
white-space: nowrap;
margin: 0 auto;
}

image
This header is not trimmed
image

Your Android phone is apparently less wide than iOS.

Use this CSS to override that feature:

.bar .title {
text-overflow: clip !important;
}

Example: http://plnkr.co/edit/98yTBB?p=preview

1 Like

I use Galaxy s3 and iPhone 4 to test.
My android device is apparently larger than iPhone 5.
This issue occurs with some header short text.
( Header long text if auto trim and replace by three dots )

This problem is more related to screen width resolution than with actual screen width size.

Still it doesn’t matter, previously posted CSS will help you with this problem.

I think the issue due max-width: 69%