On my page, I need to display an inline list of values, separated by a comma. If the list goes past its boundary and overflows, I need to end the text with ellipsis.
I originally did this in a <p> tag, like so:
<p style="border: 1px solid black; width: 300px; padding: 5px; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis">
<span>testing, </span>
<span>testing, </span>
<span>testing, </span>
<span>testing, </span>
<span>testing, </span>
<span>testing, </span>
<span>testing, </span>
<span>testing, </span>
</p>
This looks like this:
However, now I need to achieve the same display, but by using list semantics (<ul> and <li>). I’m being asked to do this to provide extra screen reader support.
I cannot figure out how to achieve that type of overflow styling in a list.
I’ve found posts on how to end the <li> in ellipsis, but that’s not what I want.
Any tips?
I whipped up a stackblitz with my examples here: https://stackblitz.com/edit/html-basics-6kc6im?file=index.html
And a note, while the stackbitz is a simple HTML app, I’m actually doing this in an Angular project (v10).
>Solution :
ul {
display: inline-block;
}
li {
display: inline;
}<!DOCTYPE html>
<head>
</head>
<body>
<p style="border: 1px solid black; width: 300px; padding: 5px; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis">
<span>testing, </span>
<span>testing, </span>
<span>testing, </span>
<span>testing, </span>
<span>testing, </span>
<span>testing, </span>
<span>testing, </span>
<span>testing, </span>
</p>
<ul style="border: 1px solid black; width: 300px; padding: 5px; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis">
<li>testing, </li>
<li>testing, </li>
<li>testing, </li>
<li>testing, </li>
<li>testing, </li>
<li>testing, </li>
<li>testing, </li>
<li>testing, </li>
</ul>
</body>
</html>try:
ul {
display: inline-block;
}
li {
display: inline;
}