Text-Overflow Ellipsis for Inline List
Question
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).
1 answers
solution1
1 ACCPTED 2022-08-25 20:37:42
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.