Css 如何强制Twitter Bootstrap.dl内容进行包装而不是截断？

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

我知道他们会说：“注意！水平描述列表会截断太长而无法放入左列的术语，修复文本溢出。”

有人知道这个问题的解决方法吗

以下是我一直在尝试的现成的引导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;
}

我这里的问题与这个问题类似，如果这有帮助的话：

---

提前谢谢

您可以注释掉

空白：nowrapfrom
.dl horizontal dt
块

如果要为单个dt包装内容，请添加内联
style='white-space:normal；'到特定的dt
在引导CSS引用之后添加CSS覆盖

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

为您的
dl
：

然后将其添加到css中：

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

如果需要，请更改宽度和边距。
我使用此选项，因为如果窗口宽度变小，我不想松开断线：

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

如果希望在每行的
dt
列中显示更多文本，则
宽度和
左边距是可选设置。20px的差异是列之间的空间

页边距底部
在行之间添加了一点空间，以便更好地区分它们。这仅在
空白：正常时有用生成换行符（不要忘记字体大小可能会受到访问者的影响（例如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;
}

您还可以避免200px的宽度。您还需要将相应的
dd
元素的
左边距
调整为比
dt
元素的宽度大20px，否则它们之间将没有空格。您不需要添加ID也不需要！重要。这个方便的解决方案提供了分配不同wid的机会在一页中填写dt。我认为页边距底部必须同时适用于dt和dd，