html - 文字溢出按钮

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

我在您的 fiddle 中看到的唯一问题是您的内联样式为 50%，这会切断按钮的其余部分