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.

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


.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;

This header is not trimmed

Your Android phone is apparently less wide than iOS.

Use this CSS to override that feature:

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


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%