I'm using Bootstrap 3.3.7 and I have a dl list configured as horizontal. I would like to visualize a full length row inside a
<dl>
<dl class="dl-horizontal">
<dt>Label 1</dt>
<dd>Text 1</dd>
<dt>how to display a full length text?</dt>
<dd></dd>
<dt>Label 2</dt>
<dd>Text 2</dd>
</dl>
Try this
Check Demo here
HTML:
<dl class="dl-horizontal">
<dt>Label 1</dt>
<dd>Text 1</dd>
<dt class="fullWidth"> 26 Lakeshore View, Sentosa Cove, Singapore 26 Lakeshore View, Sentosa Cove.</dt>
<dd></dd>
<dt>Label 2</dt>
<dd>Text 2</dd>
</dl>
CSS:
.fullWidth + dd {
margin-left: 0;
width: unset;
}
.dl-horizontal dt.fullWidth {
width: 100%;
text-overflow: unset;
white-space: initial;
text-align: left;
}