Solution 1 :

This behavior is normally related to a combination of white-space: normal and word-break: break-all. I am pretty certain that your button has the word-break definition. You could check that in your code.

The easiest way to override this would be to change the white-space definition to white-space: nowrap but that also depends on what you want to achieve with the button text. If you want it to keep breaking, but only complete words you could eliminate the word-break definition or override it to word-break: inherit.

Problem :

  <a class="btn btn-dark" href="#" role="button">Apple Music</a>

On full resolution works fine

full resolution image

On a certain resolution bootstrap behaves like this

weird in small resolution image

In smartphone resolution works again`

Smartphone resolution


Comment posted by bron

Please add some code to work with.