Question

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

我使用bootstrap和jquery。

代码：

＆＃13;

body {
  background-color: #c0c0c0;
}

＆＃13;

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

＆＃13;

我已尝试过的内容

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

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

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

元素p不允许作为此上下文中元素按钮的子元素 ..如果您使用<br>代替<p>，那么最好想要下一行的文字

元素按钮不得显示为元素的后代 ...因此请在btn btn-info btn-block上使用<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>

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

1 个答案: