I'd like to achieve the following. When all the items in a definition list are short, such as up to three characters or so, I would like something like the grid styling:
x Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
y Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
But if the items are longer, then to overhang:
x longer item
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
y longer item
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
In a mixture, it is not specified whether the short items have a line break; i could be:
x longer item
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
y Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
or
y
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
If I set a width on the column in the grid style (by any means, whether with grid-auto-columns with a maximum width, or a hard width) , then the items are simply word-wrapped to fit the column, and in the case of long words, the text overlaps with the definition.
Can this be done with nothing but CSS, without rewriting the HTML?
The <dl> elements all have a class="items" attribute, so can be targeted with dl.items, but otherwise no indication of whether they are long or short items.
This is the HTML:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
dl.items { /* ??? */ }
</style>
</head>
<body>
<dl class="items">
<dt>x</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</dd>
<dt>y</dt>
<dd>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</dd>
</dl>
<dl class="items">
<dt>longer item x</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</dd>
<dt>longer item y</dt>
<dd>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</dd>
</dl>
</body>
</html>