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

Question

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

我尝试过的：

我试过使用 'white-space' css 声明，但没有用。
我还尝试将各个按钮从 <label> 更改为 <div> 和 <a>

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

如何轻松防止此处文字溢出？

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

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

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

Answer 1

您可能需要更具体地使用您的 CSS 规则来覆盖 .btn 的白色-space 属性.

label.btn {
  white-space: normal;
}

或者你可以在你的按钮中添加另一个容器并给它白色-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>

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

How to prevent text overflow when using Angular UI Bootstrap

css

angularjs

angular-ui-bootstrap