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

Question

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

我正在使用 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 class 以将按钮文本包装在一行中...

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

此外 在此上下文中元素 p 不允许作为元素按钮的子元素..因此最好使用 <br> <p> 如果你想在下一行显示文本

另外元素按钮不得作为a元素的后代出现...所以使用btn btn-info btn-blockclass在 <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>

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

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

html

css

twitter-bootstrap-4