Html 按钮边框外的文本

我正在练习

bootstrap

按钮。 我已经编写了以下代码

<div class="row">
     <div class="col-md-1"></div>
        <div class="col-md-5">
            <button class="btn btn-success performanceButton">Best case performance</button>
        </div>
        <div class="col-md-6">  </div>
</div>

<div class="row">
    <div class="col-md-1"></div>
        <div class="col-md-5">
            <button class="btn btn-warning performanceButton">Average case performance </button>
        </div>
    <div class="col-md-6"> </div>
</div>

最佳案例绩效
平均个案表现

代码运行得很好，但是当我通过缩小浏览器尺寸来测试它的小屏幕时，第二个按钮中的文本似乎扩展到了按钮之外

以下是该问题的屏幕截图

---

有人知道怎么解决这个问题吗？提前感谢：）

通过为按钮提供

最小宽度

属性，它不会断开

按钮{
最小宽度：200px；
}

最佳案例绩效
平均个案表现

通过为按钮指定

最小宽度

属性，它不会断开

按钮{
最小宽度：200px；
}

最佳案例绩效
平均个案表现

您需要将列变大以缩小屏幕，请尝试以下方法：

    <div class="row">
     <div class="col-md-1"></div>
        <div class="col-sm-8 col-md-5">
            <button class="btn btn-success performanceButton">Best case performance</button>
        </div>
        <div class="col-sm-3 col-md-6">  </div>
</div>

<div class="row">
    <div class="col-sm-1 col-md-1"></div>
        <div class="col-sm-8 col-md-5">
            <button class="btn btn-warning performanceButton">Average case performance </button>
        </div>
    <div class="col-sm-3 col-md-6"> </div>
</div>

最佳案例绩效
平均个案表现

您需要将列变大以缩小屏幕，请尝试以下方法：

    <div class="row">
     <div class="col-md-1"></div>
        <div class="col-sm-8 col-md-5">
            <button class="btn btn-success performanceButton">Best case performance</button>
        </div>
        <div class="col-sm-3 col-md-6">  </div>
</div>

<div class="row">
    <div class="col-sm-1 col-md-1"></div>
        <div class="col-sm-8 col-md-5">
            <button class="btn btn-warning performanceButton">Average case performance </button>
        </div>
    <div class="col-sm-3 col-md-6"> </div>
</div>

最佳案例绩效
平均个案表现

您也可以将按钮的文本换行，而不是将按钮变大 只需在css中jive按钮和类一样

    .wrapit{
             width: 30px;
             white-space: normal;
             word-Wrap: break-word;
            }

---

您还可以将按钮的文本换行，而不是将按钮变大 只需在css中jive按钮和类一样

    .wrapit{
             width: 30px;
             white-space: normal;
             word-Wrap: break-word;
            }

---

非常感谢你。这对将来的情况都是非常有用和实用的。经过练习，我明白我们需要管理几乎所有的屏幕大小。我想我们只需要做一件事：谢谢你。这对将来的情况都是非常有用和实用的。经过练习，我明白我们需要管理几乎所有的屏幕大小。我想我们只需要做一件事：谢谢你的帮助。祝你今天愉快：）谢谢你的帮助。祝你今天愉快：）