bootstrap description dt wrap issue

http://stackoverflow.com/questions/12764332/how-to-force-twitter-bootstrap-dl-horizontal-dt-content-to-wrap-instead-of-trun

http://stackoverflow.com/questions/20363545/text-truncated-in-bootstrap-dl-horizontal-element

7 down vote accepted

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

I have a website that uses Bootstrap v3.0. In one of the views I need to show 6 pair of key-value items and I was using dl-horizontal element. My problem with this list is that my keys have different lenghts so when I have a long key, the text is truncated. It would be nice to have the text divided in two or more lines. Is this possible? Is there a better element to do this? I also have a problem when the text is too short. In this cases I have a lot of space to the left. Here is an example: twitter-bootstrap  twitter-bootstrap-3 share | improve this question asked  Dec 3 '13 at 23:06 David Moreno García 904 6 28

My dl-horizontal breaks and moves to the next line, I'm using the latest .less (3.0.3), try the same thing with the latest in the repo. –   BootstrapThemer  Dec 4 '13 at 2:00 I added a comment in Zessx answer to clarify the real problem. –   David Moreno García  Dec 4 '13 at 10:10 I put the css in my answer below. –   BootstrapThemer  Dec 4 '13 at 15:47 add comment

1 Answer

active oldest votes

up vote 3 down vote accepted

EDIT : Added white-space: normal on dt You issue may come from your container. You can user .panel class, with a fixed width to get it work, as the following : <div class="panel panel-danger"> <div class="panel-heading">Baseline <span class="pull-right">ERROR</span></div> <div class="panel-body"> <dl class="dl-horizontal"> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dt>Felis euismod semper eget lacinia</dt> <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> </dl> <div class="btn-toolbar text-center" role="toolbar"> <button type="button" class="btn btn-primary">Expandable</button> <button type="button" class="btn btn-primary">ERROR <span class="caret"></span></button> <button type="button" class="btn btn-danger">Delete</button> </div> </div> </div> .panel { width: 500px; } .panel .dl-horizontal dt { white-space: normal; }

7 down vote accepted

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