Definition lists formatting issues with lengthy definitions

[jfavery]

Hi,

I'm attempting to write a single page glossary on my site, and I'm using definition lists to do so. When the definitions fit on a single line it works, but if they wrap or cover more than one line, the formatting is messed up.

[Standard Library](https://en.wikipedia.org/wiki/Standard_library)
:   A standard library is the library made available across implementations 
    of a programming language. It typically include definitions for commonly 
    used algorithms, data structures, and mechanisms for input and output and 
    other operating system calls.

[TCP/IP](https://en.wikipedia.org/wiki/Internet_protocol_suite)
:   Transmission Control Protocol/Internet Protocol: communication protocols used to connect network devices.

You can see this in example that the words and definitions don't line up properly. I've tried soft and hard line line wraps in the markdown and it doesn't make any difference.

Thanks!

Jeff

[geoffreymcgill]

I tried your code sample and it appears to be rendering correctly, at least for me.

Do you have any other .css on the page or in the project that could be affecting the rendering?

What web browser and OS are you using?

Is your project available in GitHub so that I could clone and test the exact same project locally?

[jfavery]

Thanks for the quick response!

I'm running macOS 14.4.1, and Safari 17.4.1 (19618.1.15.11.14) - the latest versions. I just tried on Chrome and it works fine! Looks like the behaviour is specific to Safari. I have no other CSS, this is just the generated site.

Unfortunately no the repo is not public; it's on an internal GitLab instance ATM. I'd be happy to send you a ZIP of the site if you want to pursue it further - not critical to me, just wanted to make sure that you were aware :)

[geoffreymcgill]

Looks like the behaviour is specific to Safari.

Thanks for the clarification. I was able to reproduce the rendering issue in Safari.

The generated HTML is correct, so the issue is related to the CSS. I am investigating and with some luck this will be a quick and easy fix.

<dl>
  <dt>
    <a href="https://en.wikipedia.org/wiki/Standard_library">Standard Library</a>
  </dt>
  <dd>
    A standard library is the library made available across implementations of a
    programming language. It typically include definitions for commonly used
    algorithms, data structures, and mechanisms for input and output and other
    operating system calls.
  </dd>
  <dt>
    <a href="https://en.wikipedia.org/wiki/Internet_protocol_suite">TCP/IP</a>
  </dt>
  <dd>
    Transmission Control Protocol/Internet Protocol: communication protocols
    used to connect network devices.
  </dd>
</dl>