如何在 CSS 中的 DD 标签上获得悬挂缩进，同时还使用内容：之前

Question

We have this page with a bunch of definition lists. The guy making style mockups in Word came up with this brilliant idea to render the definition lists as "term - value" and hanging indents. I have to admit it actually is brilliant but it's difficult. I've been playing around with this quite a bit and the hanging indents really are necessary or the page becomes very ugly.

If I try to use grid (which is suboptimal anyway); the page rendering breaks down because of content before. But it appears that the hanging indent style on dd just isn't honored.

 dl dd { display: inline; margin: 0; padding-top: .25em; } dl dd:after{ display: block; content: ''; } dl dt{ display: inline-block; padding-top: .25em; } dl dd:before { content: "- "; } dl dd{ text-indent: 3.5em hanging; }

 <dl> <dt>term</dt> <dd>sentence sized definition belongs here</dd> <dt>term with long name</dt> <dd>sentence sized definition belongs here</dd> <dt>term</dt> <dd>paragraph sized definition paragraph sized definition paragraph sized definition paragraph sized definition I'm not going the really type it long but long enough to get hanging indent</dd> </dl>

I had actually tried the opposed margin and text-indent method of saying hanging indent before using the hanging keyword and it was glitchy; like the rendering believed I was trying to do something else.

 dl dd { display: inline; margin: 0; padding-top: .25em; } dl dd:after{ display: block; content: ''; } dl dt{ display: inline-block; padding-top: .25em; } dl dd:before { content: "- "; } dl dd{ text-indent: -3.5em; margin-left: 3.5em; }

 <dl> <dt>term</dt> <dd>sentence sized definition belongs here</dd> <dt>term with long name</dt> <dd>sentence sized definition belongs here</dd> <dt>term</dt> <dd>paragraph sized definition paragraph sized definition paragraph sized definition paragraph sized definition I'm not going the really type it long but long enough to get hanging indent</dd> </dl>

Answer 1

Your dd elements are display: inline — text-indent won't work on those.

Now that grouping terms and descriptions using div s is allowed, doing that lets you use hanging indents quite straightforwardly by applying text-indent to the div s instead. I strongly recommend not using the hanging keyword right now as the few browsers that support it only do so with experimental features enabled. For now, use padding, and a negative text-indent to simulate the hanging indent:

 dl dt, dl dd { display: inline; margin: 0; } dl dd::before { content: "- "; } dl div { text-indent: -3.5em; padding-top: .25em; padding-left: 3.5em; }

 <dl> <div> <dt>term</dt> <dd>sentence sized definition belongs here</dd> </div> <div> <dt>term with long name</dt> <dd>sentence sized definition belongs here</dd> </div> <div> <dt>term</dt> <dd>paragraph sized definition paragraph sized definition paragraph sized definition paragraph sized definition I'm not going the really type it long but long enough to get hanging indent</dd> </div> </dl>