Text overflowing out of button instead of moving to the next line

问题

I'm trying to create an HTML button which opens a link. It looks like a small title and some short description. But whenever the description is too large, it overflows out of the button.

I'm using bootstrap and jquery.

Code:

body {
  background-color: #c0c0c0;
}

<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<div class="container-fluid" style="text-align : center">
  <div id="final">
    <div>
      <a href="#" target="_blank" style="text-decoration: none;">
        <button class='btn btn-info btn-block'>
          <b>
            <p>
              Heading which is okay
            </p>
          </b>
          <p>
            And this is some really really very long text which is not fitting inside my button tag and is overflowing out of the button. But this text is meant to be a small description of the heading. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor iaculis enim eu ultrices. Pellentesque nec hendrerit mauris.
          </p>
        </button>
      </a>
    </div>
    <div id="search-result"></div>
  </div>
</div>

What I've already tried

p { // Truncating instead of moving to the next line
  overflow: hidden;
  text-overflow: ellipsis;
}

btn {
  // This is not working
  display: inline-block;
}

p {
  // Also not working
  display: inline-block;
}

I've tried searching Stack Overflow and found two suggestions:

Applying overflow: hidden; but it is truncating the text instead of continuing it to the next line.
Applying display: inline-block; but I am not able to get it working.

回答1:

Well the bootstrap applies white-space: nowrap to all the .btn class to wrap the button text in a single line...

So you will need to change this to white-space: normal by using a parent selector of yours so that it won't affect on all other buttons.

Also Element p not allowed as child of element button in this context..So better to use <br> instead of <p> if you want text on next line

Also The element button must not appear as a descendant of the a element...so use btn btn-info btn-block classes on <a> and remove button

#final .btn{
  white-space: normal;
}

body {
  background-color: #c0c0c0;
}

#final .btn {
  white-space: normal;
}

<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<div class="container-fluid" style="text-align : center">
  <div id="final">
    <div>
      <a href="#" target="_blank" style="text-decoration: none;" class="btn btn-info btn-block">
        <b>Heading which is okay</b><br> And this is some really really very long text which is not fitting inside my button tag and is overflowing out of the button. But this text is meant to be a small description of the heading. Lorem ipsum dolor sit
        amet, consectetur adipiscing elit. Morbi auctor iaculis enim eu ultrices. Pellentesque nec hendrerit mauris.
      </a>
    </div>
    <div id="search-result"></div>
  </div>
</div>

来源：https://stackoverflow.com/questions/49332856/text-overflowing-out-of-button-instead-of-moving-to-the-next-line

标签

html

css

twitter-bootstrap-4