bug: ion-back-button text moves other elements out of toolbar

# Bug Report

**Ionic version:**

[x] **5.x**

**Current behavior:**

Using a longer text for `ion-back-button` shows the following problems:
* it is placed behind the `ion-title` (if exists)
* it moves other elements (like `ion-buttons`) out of the header


**Expected behavior:**

The back button's text is truncated somehow, e.g. with `text-overflow: ellipsis`.

**Steps to reproduce:**

1. Create a new app `ionic start myApp blank`
2. Add two new pages `ionic generate page myPageX`
3. Add
* `ion-back-button` with a long `text` to both pages
* some `ion-title` to one page
* some `ion-buttons` with `slot=end` to the end of the header's toolbar
4. Open those pages on a small screen device (e.g. iPhone SE). You will see the problem.

**Related code:**

See repository for example: https://github.com/pj035/ionic-issue-back-button-long-test

```html

```

**Other information:**

Could be related to https://github.com/ionic-team/ionic/issues/8700.

**Ionic info:**

```
$ ionic info

Ionic:

Ionic CLI : 6.6.0 (/home/philipp/.nvm/versions/node/v10.18.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.26
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.2.0

Utility:

cordova-res (update available: 0.13.0) : 0.11.0
native-run (update available: 1.0.0) : 0.3.0

System:

NodeJS : v10.18.0 (/home/philipp/.nvm/versions/node/v10.18.0/bin/node)
npm : 6.13.4
OS : Linux 5.6
```

**Notes**

I'm not sure yet if this a bug report or rather a feature request. I could imagine a solution, which provides the developer some more flexibility, like setting a max-width for the back button (text), that automatically truncates the text then.

PS: I could image to contribute here, but at first I want to wait how its best to proceed on such an issue (fixing or new feature).