使用 Angular UI Bootstrap 时如何防止文本溢出答案

【问题标题】：How to prevent text overflow when using Angular UI Bootstrap使用 Angular UI Bootstrap 时如何防止文本溢出
【发布时间】：2016-06-01 05:15:25
【问题描述】：

我正在研究一组复选框，使用 Angular UI Bootstraps 按钮集显示。

我尝试过的：

我尝试使用“空白”css 声明，但没有帮助。
我还尝试将单个按钮从 <label> 更改为 <div> 和 <a>

这些都没有解决文本溢出的问题。

这里如何轻松防止文字溢出？

JSFiddle：https://jsfiddle.net/03ujphxg/

如果您缩小右侧列的宽度，虽然由于结果显示的位置可能不太容易看到，但您会看到文本溢出。

注意：我不能（不想）在按钮元素上设置特定的宽度或高度。

【问题讨论】：

标签： css angularjs angular-ui-bootstrap

【解决方案1】：

您可能需要更具体的 CSS 规则来覆盖 .btn 的 white-space 属性。

label.btn {
  white-space: normal;
}

或者你可以在你的按钮中添加另一个容器并给它 white-space 属性。

<label class="btn btn-default">
    <span style="white-space: normal">
        <input type="checkbox">
        Connections / Hoses Leaking or Cracked Connections / Hoses Leaking or Cracked
    </span>
</label>

【讨论】：

添加<span> 元素是一个简单的解决方案。谢谢，Eightdotthree。