CSS 标签文本未在 Bootstrap 网格设置中换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30087569/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Label text not wrapping in a Bootstrap grid setup
提问by armyofda12mnkeys
I am trying to get labels to not wrap in Bootstrap3 but can't seem to get it to work.
我试图让标签不包含在 Bootstrap3 中，但似乎无法让它工作。
I tried placing 'word-wrap: break-word' even on the label but that doesn't seem to break the label's sentence either.
我尝试在标签上放置“自动换行：断字”，但这似乎也没有破坏标签的句子。
I did see in the documentation to 'Wrap labels and controls in .form-group for optimum spacing.' but I cannot use 'form-group' i think if I want to use bootstrap divs to control grid/form layout of the labels/answers separately (the labels/inputs are more mobile friendy and expand to 100% of the screener when on xs screens, but on sm+ screen the labels show up left of the input to save screen space).
我确实在文档中看到“将标签和控件包装在 .form-group 中以获得最佳间距”。但我不能使用“表单组”，我想如果我想使用引导 div 来分别控制标签/答案的网格/表单布局（标签/输入更适合移动设备，并在 xs 上扩展到筛选器的 100%屏幕，但在 sm+ 屏幕上，标签显示在输入的左侧以节省屏幕空间）。
Here is an example... Expand the jsfiddle's right side frame very big and then you see the form labels get placed on the left with right text-alignment and the issue occuring then.
这是一个示例...将 jsfiddle 的右侧框架展开非常大，然后您会看到表单标签放置在左侧，右侧文本对齐，然后出现问题。
http://jsfiddle.net/armyofda12mnkeys/nud64aq7/
http://jsfiddle.net/armyofda12mnkeys/nud64aq7/
Pic below of the 3rd label which doesn't wrap:
未包装的第三个标签的下图：
Here is the basic code I use for that label/input setup:
这是我用于该标签/输入设置的基本代码：
<div class="col-xs-12 col-sm-4 label">
<label for="firstname">House Number and Street and longer label and longer label and longer label and longer label and longer label </label>
</div>
<div class="col-xs-12 col-sm-8 answer">
<input type="text" class="form-control" placeholder="Enter your house # here" />
</div>
回答by crazymatt
If you look through the DOM elements in your Fiddle you will see this code for the label:
如果您查看 Fiddle 中的 DOM 元素，您将看到以下代码label：
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
Just remove the property or overwrite the white-space: nowrap;or set the property to normal
只需删除属性或覆盖white-space: nowrap;或将属性设置为normal
Update 1.0: Just to clarify this CSS property only exists in Bootstrap v3. In v4.x the white-spaceproperty has been removed from labelelements.
更新 1.0：只是为了澄清此 CSS 属性仅存在于 Bootstrap v3 中。在 v4.x 中，该white-space属性已从label元素中删除。
Update 2.0: People have been asking about BS v4.1 and looking through their code the labelwraps like normal text and doesn't not contain a white-spaceproperty. However I did notice in the input group section that some of the classes being used do contain white-space: nowrap(i.e. input-group-textclass). The fix would be the same, overwrite the property in a separate file or edit that specific class to use white-space: normal. If its happening in a different section that I dont see let me know in the comments and I'd be happy to take a look!
更新 2.0：人们一直在询问 BS v4.1 并查看他们的代码，label包装像普通文本一样，不包含white-space属性。但是，我确实在输入组部分注意到正在使用的某些类确实包含white-space: nowrap（即input-group-text类）。修复方法是相同的，在单独的文件中覆盖该属性或编辑该特定类以使用white-space: normal. 如果它发生在我看不到的不同部分，请在评论中告诉我，我很乐意看一看！
回答by Dr Shenanigan
Are you trying to make the text wrap?If so, add
你想让文字换行吗？如果是，请添加
white-space:normal;
to the label class.
到标签类。
回答by Fetz
add this to the label
将此添加到标签
label {
white-space: normal;
}
example working: http://jsfiddle.net/nud64aq7/4/
