Force a line break inside the button's text when using small screens

Question

I have a responsive web app that contains some buttons which are too large for small mobile screens. They have too much text in them so they end up going off the screen. I am currently using the a tag as a button by given them bootstrap classes. So the code currently looks like this:

<a className='btn btn-default'>Here I have a button with long text in it, which causes some text to go off screen when in small mobile devices.</a>

I would like add a line break to the text, so that way it won't go off the screen (which is why I don't simply add a <br/>), but only on the small screens. How could I do that?

Edit: Here is a fuller view of the code:

<div className='row'>
  <div className='col-sm-12'>
    <p>Some text which is irrelevant to the problem.</p>
    <a className='btn btn-default'>Here I have a button with long text in it, which causes some text to go off screen when in small mobile devices.</a>
  </div>
</div>

Answer 1

You have two options:

1) Bootstrap uses white-space: nowrap for its buttons, but you can override that for smaller screens:

@media only screen and (max-width: 30em) {
  body .btn { white-space: normal }
}

2) If you want more control over the wrapping, you can add spans around the lines you want, and then set display: block on smaller screens:

<a className='btn btn-default'>
  <span>This will be line 1</span>
  <span> followed by line 2</span>
</a>

@media only screen and (max-width: 30em) {
  .btn span { display: block }
}

Note: 30em is equal to 480px on most devices. You should always define media queries in em. The conversion is easy: divide your pixel number by 16. This will allow your site to render correctly for users who have adjusted their default browser font size for easier reading.

Answer 2

Check out the responsive utilities that Bootstrap offers:

Bootstrap 3:

https://getbootstrap.com/docs/3.3/css/#responsive-utilities

You can use something like:

<br class="hidden-md hidden-lg">

Bootstrap 4:

https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

You can use something like:

<br class="d-md-none">

Adjust the breakpoint depending on what screen sizes you want to target.