The other day I wanted to format the text in a post in WordPress using a definition list-like structure. Basically I wanted something like this:

May 2018 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

June 2018 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

I found an abandoned plugin which hasn’t been updated for loooong time and not much else. After thinking for a bit, I realised that it is possible to achieve this formatting using only CSS.

The first step is to add the following styles in Appearance/Edit CSS:

p.def-list strong {
	display: inline-block;
	float: left;
	margin-left: -7em;
}

p.def-list{
	display: inline-block;
	float: right;
	padding-left: 7em;
}

After this, if you use the new Gutenberg editor, you need to add a paragraph block for each entry, make bold the “term” and then enter def-list in the Additional CSS Class.

Depending on the size of your terms, you may need to adjust the size of the margin-left/padding-left.

If you do not use Gutenberg, it is still possible to use this approach, but you will need to edit the HTML directly. For the example above, you will need to enter to following in the text editor:

<p class="def-list"><strong>May 2018</strong> Lorem ipsum dolor sit amet, consectetur adipiscing 
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p class="def-list"><strong>June 2018</strong> Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

It is a bit painful, but it does the trick. One thing that you need to be particularly careful is those cases where the definition is only a few words and does not take the whole line. In those cases the result can be a bit messy like in the example below:

May 2018 Lorem ipsum dolor sit amet, consectetur adipiscing

This is the text after that does not get displayed after the definition list. The solution to this problem is to wrap everything in a div that has 100% width. The full solution may appear in another post.