文本溢出按钮

Question

我们公司正在构建一个允许用户拖放的界面，其中一部分是他们可以按百分比自定义按钮长度。

这实际上非常酷，我认为它非常有用，但是当我看到它的响应方面时，我遇到了一个问题。

如果按钮设置为100％这样的百分比，它将正常工作，直到它们缩小屏幕尺寸以至于按钮中的文本开始溢出背景。无论如何要解决这个问题而不使用媒体查询设置固定吗？文字可以很长，我不想过分限制它。

我的HTML看起来像这样

<div class="form_control centered" >
    <div class="centered">
        <label class="control-label">Label</label>
    </div>

        <label class="btn btn-primary adjustableOption" > //Width can be added here
            <input  type="checkbox" />
            <span class='optionText'>Title of check</span>
        </label>
</div>

我的css看起来像这样

.btn .optionText{
    display:inline-block;
    padding-left:1em;
    text-align:left;
}

adjustableOption .optionText{
    width:90%;
}

只是为了展示这里发生的一些截图。

这就是它应该做的事情

这就是它正在做的事情。

也是一个帮助的jsFiddle。 http://jsfiddle.net/52VtD/8216/

Answer 1

我在你的小提琴中看到的唯一问题是你的内联风格为50％，这会削减按钮的其余部分

Answer 2

position:fixed;将解决此问题。 在没有引导程序的小提琴中，将btn-primary类更改为：

.btn, .btn-primary{
    background-color:green;
    position:fixed;

}

另一种选择：

在Bootstrap中，.btn类有一个空格：nowrap;属性，使按钮文本不会包装。因此，在将其设置为正常后，如果文本超出设置宽度，文本应该换行到下一行。

white-space: normal;