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:

Answer 1

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