I have four buttons which are right-aligned on the navigation bar and title in center. The title text is bigger and it’s overlapping with right buttons. How can I set title width so that it shows the three ellipses when text is overflowing?
Here’s Ionic docs on the header. You can use the default classes or add Your own and just add proper CSS. If You need more info about the needed CSS take a look here
Can you please suggest default classes so that i can test with them. I applied custom css but it’s not good for different different screens.
Default classes are only needed to point to the element You are styling 
There is no default ellipsis in Ionic’s header (as far as I know).
I understand Your concern with different screen sizes though. What You should try to do is write Your CSS percentage-based. So for example, instead of setting Your middle text to for example 150px You should set it to for example 30%. Of course I don’t see Your app so I’m kind of guessing 
As far as width on different screen sizes is concerned implementing percentage-based styles usually fixes most issues. You can consider using a CSS grid system, for example:
http://purecss.io/grids/
http://960.gs/
If You choose a grid than You can control the size of Your header with classes.
I hope You find what You need!