如何强制Twitter Bootstrap .dl - 水平DT内容包装而不是truncate？ [英] How to force Twitter Bootstrap .dl-horizontal DT content to wrap instead of truncate?

问题描述

Bootstrap具有很好的水平定义列表样式，但我想要DT内容包装，而不是截断。

我知道他们的 base.css页面

这是现成的bootstrap CSS我一直在努力，没有成功：

  .dl-horizo​​ntal {
 * zoom：1; 
} 
 .dl-horizo​​ntal：before，
 .dl-horizo​​ntal：after {
 display：table; 
 content：; 
 line-height：0; 
} 
 .dl-horizo​​ntal：after {
 clear：both; 
} 
 .dl-horizo​​ntal dt {
 float：left; 
 width：160px; 
 clear：left; 
 text-align：right; 
 overflow：hidden; 
 text-overflow：ellipsis; 
 white-space：nowrap; 
} 
  

我的问题在这里类似于这个问题，如果有帮助：
如何防止Twitter启动dds上升如果为空？

提前感谢！

解决方案

您可以注释掉 white-space：nowrap; 从 .dl-horizo​​ntal dt 在所有的dt

如果你想包装内容为一个dt然后添加inline style ='white-space：normal;'到特定的dt

Bootstrap has great horizontal definition list styling, but I want the DT content to wrap, not be truncated.

I know on their base.css page they say: "Heads up! Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow."

Anyone know of a fix for this?

Here's the off-the-shelf bootstrap CSS I've been wrenching on with no success:

.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: how to prevent Twitter bootstrap dds from going up if empty?

Thanks in advance!

解决方案

you can comment out white-space: nowrap; from .dl-horizontal dt block if you want to wrap content in all the dt

if you want to wrap content for a single dt then add inline style='white-space: normal;' to that specific dt

这篇关于如何强制Twitter Bootstrap .dl - 水平DT内容包装而不是truncate？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！