Text-Overflow Ellipsis for Inline List-CodePudding

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).

CodePudding user response：

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;
}