css - CSS Twitter 引导表单

Question

我在 Twitter Bootstrap2 中实现表单时遇到问题。

我已经建立了一个 JS Fiddle http://jsfiddle.net/manishap/WNSCW/15/

这是代码：

<div class="container">
<div id="ratingSubectives" class="row-fluid">
    <form class="well" >
        <fieldset>
            <div class="control-group span3">
                <label class="control-label" for="select01">Aaaaaaaaaaaa</label>
                <div class="controls"><select id="select01">
                    <option value=""></option>
                    <option value="A">A</option>
                    <option selected="selected" value="B">B</option>
                    <option value="C">C</option>
                </select></div>
            </div>
            <div class="control-group span3">
                <label class="control-label" for="select02">Bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</label>
                <div class="controls"><select id="select02">
                    <option></option>
                    <option selected="selected" value="A">B</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                </select></div>
            </div>
            <div class="control-group span3">
                <label class="control-label" for="select03"><a href="#">Ccccccccccc</a></label>
                <div class="controls"><select id="select03" disabled>
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option selected="selected" value="C">C</option>
                </select></div>
            </div>
            <div class="control-group span3">
                <label class="control-label" for="select03">&nbsp;</label>
                <div class="controls"><button type="submit" class="btn">Submit</button></div>
            </div>
        </fieldset>
    </form>             
 </div>

我正在尝试在 div 中水平放置 3 个带有标签的选择控件。它的英文看起来不错，带有短标签。然而，最终这是一个以多种语言提供的网站，如果标签变长（如中间选择器），标签文本会与旁边的文本重叠。如何让文本换行？

我尝试根据另一个答案添加 max-width: 100%，但这不起作用。也许我把标签放在 div 而不是标签标签中......

感谢您的任何建议。

Answer 1

使用word-wrap属性断词：

.control-label {
  word-wrap: break-word;
}