How to force Twitter Bootstrap .dl-horizontal DT content to wrap instead of truncate?

Question

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: Prevent Twitter bootstrap empty <dd> filling with next <dd> value

Thanks in advance!

Answer 1

add an CSS overwrite after the bootstrap CSS references

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

Answer 2

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 width and the margin-left are optional settings if you like to display more text in the dt column per line. The 20px difference is the space between the columns.

The margin-bottom adds 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).

small window width:

boostrap source to compare:

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

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