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

Question

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

我尝试过的:

1. 我试过使用 'white-space' css 声明，但没有帮助。

2. 我也尝试过从 <label> 中更改各个按钮到两个<div> & <a>

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

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

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

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

注意:我不能(不想)在按钮元素上设置特定的宽度或高度。

Answer 1

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

label.btn {
  white-space: normal;
}

或者您可以在按钮内添加另一个容器并为其指定空白属性。

<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>