javascript - Force a line break inside the button's text when using small screens - Stack Overflow

admin管理员组

文章数量:1306237

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>

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>

• javascript
• css
• twitter-bootstrap
• reactjs
• responsive-design

Share Improve this question Follow edited Jun 8, 2018 at 19:33 theJuls asked Jun 8, 2018 at 19:24 theJulstheJuls 7,4701919 gold badges9696 silver badges182182 bronze badges 2

• We need the code of your parent element. – user2226755 Commented Jun 8, 2018 at 19:30
• @HorsSujet I have updated the OP with the div it belongs to. – theJuls Commented Jun 8, 2018 at 19:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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.

Check out the responsive utilities that Bootstrap offers:

Bootstrap 3:

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

You can use something like:

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

Bootstrap 4:

https://getbootstrap./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.

Please try this, it worked for me

input[type="submit"] {
   white-space: normal;
}

Also we have to set -webkit-appearance as none to remove specific styling of the input.

本文标签： javascriptForce a line break inside the button39s text when using small screensStack Overflow