CODEWITHSUNDEEP
csstwitter-bootstrap
Rowe Morehouse
Rowe Morehouse

Reputation: 4585

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

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!

Upvotes: 29

Views: 48832

Answers (4)

Radiguet Mathieu
Radiguet Mathieu

Reputation: 59

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.

Upvotes: 5

mgutt
mgutt

Reputation: 6177

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).

enter image description here

small window width:
enter image description here

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

Upvotes: 20

dinnouti
dinnouti

Reputation: 1796

add an CSS overwrite after the bootstrap CSS references

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

Upvotes: 41

000
000

Reputation: 3950

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

Upvotes: 18

Related Questions