CSS 如何强制 Twitter Bootstrap .dl-horizontal DT 内容换行而不是截断？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12764332/
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
How to force Twitter Bootstrap .dl-horizontal DT content to wrap instead of truncate?
提问by Rowe Morehouse
Bootstrap has great horizontal definition list styling, but I want the DT content to wrap, not be truncated.
Bootstrap 具有很好的水平定义列表样式，但我希望 DT 内容被包装，而不是被截断。
I know on their base.css pagethey say: "Heads up! Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow."
我知道在他们的base.css 页面上，他们说：“注意！水平描述列表将截断太长而无法放入左列修复文本溢出的术语。”
Anyone know of a fix for this?
有人知道解决这个问题吗？
Here's the off-the-shelf bootstrap CSS I've been wrenching on with no success:
这是我一直在努力但没有成功的现成引导 CSS：
.dl-horizontal {
*zoom: 1;
}
.dl-horizontal:before,
.dl-horizontal:after {
display: table;
content: "";
line-height: 0;
}
.dl-horizontal:after {
clear: both;
}
.dl-horizontal dt {
float: left;
width: 160px;
clear: left;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
My quesion here is similar to this question, if that helps: Prevent Twitter bootstrap empty <dd> filling with next <dd> value
我的问题与此问题类似，如果有帮助： 防止 Twitter bootstrap empty <dd> 填充下一个 <dd> 值
Thanks in advance!
提前致谢！
采纳答案by 000
you can comment out white-space: nowrap;from .dl-horizontal dtblock if you want to wrap content in all the dt
如果要将内容包装在所有 dt 中，则可以white-space: nowrap;从.dl-horizontal dt块中注释掉
if you want to wrap content for a single dt then add inline style='white-space: normal;'to that specific dt
如果您想为单个 dt 包装内容，则将内联添加style='white-space: normal;'到该特定 dt
回答by dinnouti
add an CSS overwrite after the bootstrap CSS references
在引导 CSS 引用后添加 CSS 覆盖
.dl-horizontal dt
{
white-space: normal;
width: 200px;
}
回答by mgutt
I used this as I did not want to loose the line-breaking if window width becomes small:
我使用它是因为如果窗口宽度变小，我不想松开换行符：
@media (min-width: 768px) {
.dl-horizontal dt {
width:280px;
white-space: normal;
margin-bottom: 5px;
}
.dl-horizontal dd {
margin-left:300px;
}
}
The widthand the margin-leftare optional settings if you like to display more text in the dtcolumn per line. The 20px difference is the space between the columns.
该width和margin-left如果你喜欢以显示更多的文字是可选的设置，dt每行列。20px 的差异是列之间的空间。
The margin-bottomadds a little space between the rows so they are better differentiated from each other. This is only useful if white-space: normal;produces a line break (do not forget that the font size can be influenced through the visitor (e.g. windows dpi setting).
该margin-bottom行添加，使他们更好地相互区分之间的空间不大。这仅在white-space: normal;产生换行符时有用（不要忘记字体大小可以通过访问者影响（例如 windows dpi 设置）。
small window width:
小窗宽：
boostrap source to compare:
要比较的 boostrap 源：
dd {
margin-left: 0;
}
@media (min-width: 768px)
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (min-width: 768px)
.dl-horizontal dd {
margin-left: 180px;
}
回答by Radiguet Mathieu
Give an id to your dl: <dl class="dl-horizontal" id="freelance">
给你一个 id dl：<dl class="dl-horizontal" id="freelance">
Then add this to your css :
然后将其添加到您的 css 中：
#freelance dt {
overflow: visible;
width: 170px !important;
margin-right: 8px;
}
Change width and margin if needed.
如果需要，更改宽度和边距。
