html - 文本溢出按钮而不是移动到下一行

Question

我正在尝试创建一个打开链接的 HTML 按钮。它看起来像一个小标题和一些简短的描述。但是每当描述太大时，它就会从按钮中溢出。

我正在使用 bootstrap 和 jquery。

代码:

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>

---

我已经尝试过的

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;
}

---

我尝试搜索 Stack Overflow 并找到了两个建议:

• 应用 overflow: hidden; 但它截断了文本而不是继续到下一行。
• 正在应用 display: inline-block; 但我无法让它正常工作。

Answer 1

好吧， Bootstrap 适用 white-space: nowrap所有 .btn将按钮文本包装在一行中的类...

因此您需要将其更改为 white-space: normal通过使用您的父选择器，这样它就不会影响所有其他按钮。

此外，元素 p 在此上下文中不允许作为元素按钮的子元素..所以最好使用 <br>而不是 <p>如果你想要下一行的文字

此外，元素按钮不得作为 a 元素的后代出现...所以使用 btn btn-info btn-block类(class) <a>并删除 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>