26

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> 值

提前致谢！

4

4 回答 4

39

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

.dl-horizontal dt 
{
    white-space: normal;
    width: 200px; 
}
于 2012-10-12T13:57:29.793 回答
20

我使用它是因为如果窗口宽度变小，我不想松开换行符：

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

如果您想在每行的列中显示更多文本，则width和是可选设置。20px 的差异是列之间的空间。margin-leftdt

这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;
}
于 2015-04-01T10:50:15.010 回答
18

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

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

于 2012-10-07T10:19:03.887 回答
5

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

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

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

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

于 2013-03-15T05:41:58.597 回答