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

查看：10
本文介绍了文本溢出按钮而不是移动到下一行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

代码:

body {背景颜色:#c0c​​0c0；}

<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="最终"><div><a href="#" target="_blank" style="text-decoration: none;"><button class='btn btn-info btn-block'><b><p>标题哪个好</p></b><p>这是一些非常非常长的文本，它不适合我的按钮标签并且从按钮中溢出.但是这段文字只是对标题的一个小说明.Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Morbi auctor iaculis enim eu ultrices.Pellentesque nec hendrerit mauris.</p></a>

<div id="搜索结果"></div>

<小时>

我已经尝试过的

p {//截断而不是移动到下一行溢出:隐藏；文本溢出:省略号；}

或

btn {//这不起作用显示:内联块；}

或

p {//也不起作用显示:内联块；}

<小时>

我尝试搜索 Stack Overflow 并找到两个建议:

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

解决方案

Bootstrap 将 white-space: nowrap 应用到所有的 .btn 类来包裹按钮单行文本...

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

还有 在这种情况下不允许元素 p 作为元素按钮的子元素..所以最好使用 <br> 而不是 <p> 如果你想要下一行的文字

另外元素按钮不能作为a元素的后代...所以使用btn btn-info btn-block 上的类并删除 button

#final .btn{空白:正常；}

body {背景颜色:#c0c​​0c0；}#final .btn {空白:正常；}

<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="最终"><div><a href="#" target="_blank" style="text-decoration: none;"class="btn btn-info btn-block"><b>可以的标题</b><br>这是一些非常非常长的文本，它不适合我的按钮标签并且从按钮中溢出.但是这段文字只是对标题的一个小说明.Lorem ipsum dolor 坐amet, consectetur adipiscing 精英.Morbi auctor iaculis enim eu ultrices.Pellentesque nec hendrerit mauris.</a>

<div id="搜索结果"></div>

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.

I'm using bootstrap and jquery.

Code:

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>

What I've already tried

p { // Truncating instead of moving to the next line
  overflow: hidden;
  text-overflow: ellipsis;
}

Or

btn {
  // This is not working
  display: inline-block;
}

Or

p {
  // Also not working
  display: inline-block;
}

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

解决方案

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

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.

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

Also The element button must not appear as a descendant of the a element...so use btn btn-info btn-block classes on <a> and remove 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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆