6

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:

enter image description here

David Moreno García
  • 4,423
  • 8
  • 49
  • 82

1 Answers1

16

EDIT : Added white-space: normal on dt

You issue may come from your container.

You can use a .panel class with a fixed width to get it work. Consider the following:

enter image description here

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

Bootply

Joey Liechty
  • 75
  • 8
zessx
  • 68,042
  • 28
  • 135
  • 158
  • As you can see in your example, the text "Felis euismod semper eget lacinia" is still truncated. I'm always talking about the left part (the keys). – David Moreno García Dec 04 '13 at 10:09
  • Ok, I see what you need. You could add `.dl-horizontal dt { white-space: normal; }`, see my edit. – zessx Dec 04 '13 at 20:13