文本溢出按钮，而不是移至下一行 [英] Text overflowing out of button instead of moving to the next line

问题描述

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

I'm trying to create an HTML button which opens a link. It looks like a small title and some short description. But whenever the description is too large, it overflows out of the button.

我正在使用引导程序和jquery.

I'm using bootstrap and 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，发现了两个建议:

---

I've tried searching Stack Overflow and found two suggestions:

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

• Applying overflow: hidden; but it is truncating the text instead of continuing it to the next line.
• Applying display: inline-block; but I am not able to get it working.

推荐答案

好，引导程序将 white-space:nowrap 应用于所有 .btn 类以包装按钮单行文字...

Well the bootstrap applies white-space: nowrap to all the .btn class to wrap the button text in a single line...

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

So you will need to change this to white-space: normal by using a parent selector of yours so that it won't affect on all other buttons.

在这种情况下， 元素p也不能作为元素按钮的子元素 .因此最好使用< br> 代替< p> ，如果您想在下一行输入文字

Also Element p not allowed as child of element button in this context..So better to use <br> instead of <p> if you want text on next line

还 元素按钮不能显示为元素的后代 ...因此，请使用 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>

这篇关于文本溢出按钮，而不是移至下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！