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

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>