如何强制Twitter Bootstrap .dl-水平DT内容换行而不是截断？

Question

Bootstrap具有很好的水平定义列表样式,但我希望DT内容包装,而不是截断.

我知道在他们的base.css页面上他们说:"抬头!水平描述列表会截断太长而不适合左列的术语修复文本溢出."

有人知道解决这个问题吗？

这是现成的自助式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;
}

我的问题类似于这个问题,如果这有帮助: 防止Twitter引导空<dd>填充下一个<dd>值

提前致谢!

Answer 1

在引导CSS引用之后添加CSS覆盖

.dl-horizontal dt 
{
    white-space: normal;
    width: 200px; 
}

Answer 2

我使用了这个,因为如果窗口宽度变小,我不想放弃断行:

@media (min-width: 768px) {
    .dl-horizontal dt {
        width:280px;
        white-space: normal;
        margin-bottom: 5px;
    }
    .dl-horizontal dd {
        margin-left:300px;
    }
}

该width和margin-left如果你喜欢以显示更多的文字是可选的设置,dt每行列.20px的差异是列之间的空间.

该margin-bottom行添加,使他们更好地相互区分之间的空间不大.这仅在white-space: normal;产生换行符时有用(不要忘记可以通过访问者影响字体大小(例如,windows dpi设置).

小窗宽:

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;
}

Answer 3

如果你想在所有dt中包装内容,你可以white-space: nowrap;从.dl-horizontal dt块中注释掉

如果要为单个dt包装内容,则将内联添加style='white-space: normal;'到该特定dt

Answer 4

给您的ID dl：<dl class="dl-horizontal" id="freelance">

然后将其添加到您的CSS中：

#freelance dt {
    overflow: visible;
    width: 170px !important;
    margin-right: 8px;
}

如果需要，更改宽度和边距。