1

I want to create a description list in which each term and description pair appear in one single line, but having those “lines” with a hanging indent in case they wrap.

Here’s what I want visually but using p elements instead:

p {
  margin: 0 0 0 2em;
  text-indent: -2em
}
<p><b>H:</b> Himenaeos</p>
<p><b>U:</b> Ullamcorper</p>
<p><b>Lorem Ipsum pulvinar ullamcorper nulla facilisi integer lacinia massa cras sed risus:</b> Lectus orbi in dui quis est pulvinar ullamcorper nulla facilisi integer lacinia sollicitudin massa cras metus sed aliquet risus a tortor id quam.</p>
<p><b>Vestibulum sed aliquet risus a tortor integer id quam morbi mi quisque nisl felis venenatis tristique dignissim in ultrices sit amet augue proin sodales libero eget ante nulla quam aenean laoreet:</b> Vestibulum risus a tortor integer</p>
<p><b>Q:</b> Quisque</p>

So far I have managed to display each pair inline, but not luck with the hanging indent.

My current code:

dt,
dd {
  display: inline;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0;
  padding: 0
}

dt::before {
  content: "";
  display: block;
}
<dl>
  <dt>H:</dt>
  <dd>Himenaeos</dd>
  <dt>U:</dt>
  <dd>Ullamcorper</dd>
  <dt>Lorem Ipsum pulvinar ullamcorper nulla facilisi integer lacinia massa cras sed risus:</dt>
  <dd>Lectus orbi in dui quis est pulvinar ullamcorper nulla facilisi integer lacinia sollicitudin massa cras metus sed aliquet risus a tortor id quam.</dd>
  <dt>Vestibulum sed aliquet risus a tortor integer id quam morbi mi quisque nisl felis venenatis tristique dignissim in ultrices sit amet augue proin sodales libero eget ante nulla quam aenean laoreet:</dt>
  <dd>Vestibulum risus a tortor integer</dd>
  <dt>Q:</dt>
  <dd>Quisque</dd>
</dl>
VorganHaze
  • 1,887
  • 1
  • 12
  • 35

2 Answers2

2

You can consider negative margin that you rectify with a positive padding and you will get the same effect:

dl {
 padding-left:2em;
}
dt,
dd {
  display: inline;
  margin:0;
  padding:0;
}
dt {
 margin-left:-2em;
}

dd:after {
  content:"";
  display:block;
}
dt {
  font-weight: bold;
}
<dl>
  <dt>H:</dt>
  <dd>Himenaeos</dd>
  <dt>U:</dt>
  <dd>Ullamcorper</dd>
  <dt>Lorem Ipsum pulvinar ullamcorper nulla facilisi integer lacinia massa cras sed risus:</dt>
  <dd>Lectus orbi in dui quis est pulvinar ullamcorper nulla facilisi integer lacinia sollicitudin massa cras metus sed aliquet risus a tortor id quam.</dd>
  <dt>Vestibulum sed aliquet risus a tortor integer id quam morbi mi quisque nisl felis venenatis tristique dignissim in ultrices sit amet augue proin sodales libero eget ante nulla quam aenean laoreet:</dt>
  <dd>Vestibulum risus a tortor integer</dd>
  <dt>Q:</dt>
  <dd>Quisque</dd>
</dl>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

You can wrap the definition list items in a div and reset the margin on those dd's in the divs with less text.

dt,
dd {
  display: inline-block;
}

dt {
  font-weight: bold;
}
div:nth-of-type(1) dd,
div:nth-of-type(2) dd,
div:nth-of-type(5) dd {
 margin: 0;
}
<dl>
  <div>
  <dt>H:</dt>
  <dd>Himenaeos</dd>
  </div>
  <div>
  <dt>U:</dt>
  <dd>Ullamcorper</dd>
  </div>
  <div>
  <dt>Lorem Ipsum pulvinar ullamcorper nulla facilisi integer lacinia massa cras sed risus:</dt>
  <dd>Lectus orbi in dui quis est pulvinar ullamcorper nulla facilisi integer lacinia sollicitudin massa cras metus sed aliquet risus a tortor id quam.</dd>
  </div>
  <div>
  <dt>Vestibulum sed aliquet risus a tortor integer id quam morbi mi quisque nisl felis venenatis tristique dignissim in ultrices sit amet augue proin sodales libero eget ante nulla quam aenean laoreet:</dt>
  <dd>Vestibulum risus a tortor integer</dd>
  </div>
  <div>
  <dt>Q:</dt>
  <dd>Quisque</dd>
  </div>
</dl>
  • The problem with this one is that the description "Vestibulum risus a tortor integer" starts in a new line when its term span more that one line. – VorganHaze Mar 26 '20 at 16:53