twitter-bootstrap 在 Bootstrap dl-horizontal 元素中截断的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20363545/
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
Text truncated in Bootstrap dl-horizontal element
提问by David Moreno García
I have a website that uses Bootstrap v3.0. In one of the views I need to show 6 pair of key-value items and I was using dl-horizontal element. My problem with this list is that my keys have different lenghts so when I have a long key, the text is truncated. It would be nice to have the text divided in two or more lines. Is this possible? Is there a better element to do this?
我有一个使用 Bootstrap v3.0 的网站。在其中一个视图中，我需要显示 6 对键值项，并且我使用的是dl-horizontal element。我对这个列表的问题是我的键有不同的长度，所以当我有一个长键时，文本被截断。将文本分成两行或更多行会很好。这可能吗？有没有更好的元素来做到这一点？
I also have a problem when the text is too short. In this cases I have a lot of space to the left. Here is an example:
当文本太短时，我也会遇到问题。在这种情况下，我左边有很多空间。下面是一个例子：
回答by zessx
EDIT : Added white-space: normalon dt
编辑：添加white-space: normal上dt
You issue may come from your container.
您的问题可能来自您的容器。
You can use a .panelclass with a fixed width to get it work.
Consider the following:
您可以使用.panel具有固定宽度的类来使其工作。考虑以下：
<div class="panel panel-danger">
<div class="panel-heading">Baseline <span class="pull-right">ERROR</span></div>
<div class="panel-body">
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
<div class="btn-toolbar text-center" role="toolbar">
<button type="button" class="btn btn-primary">Expandable</button>
<button type="button" class="btn btn-primary">ERROR <span class="caret"></span></button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
.panel {
width: 500px;
}
.panel .dl-horizontal dt {
white-space: normal;
}
