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

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

Answer 2

Give an id to your dl: <dl class="dl-horizontal" id="freelance">

Then add this to your css :

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

Change width and margin if needed.

Answer 3

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 4

add an CSS overwrite after the bootstrap CSS references

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