文本溢出按钮，而不是移至下一行

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

---

我尝试搜索堆栈溢出，发现了两个建议：

• 正在应用overflow: hidden; 但是它会截断文本，而不是继续到下一行。
• 应用display: inline-block; 但我无法使其正常运行。

Answer 1

引导程序很好地应用了white-space: nowrap应用于所有.btn类，以将按钮文本包装在一行中...

因此，您需要将其更改为white-space: normal ，请使用您的父选择器，以免影响其他所有按钮。

此外，在这种情况下，元素p不能用作元素按钮的子元素。因此 ，如果要在下一行显示文本，最好使用<br>代替<p>

另外元素按钮一定不能作为a元素的后代出现 ...因此在<a>上使用btn btn-info btn-block类并删除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>