I've been struggling with this problem for hours, but I can't seem to find a solution.
How can I ensure that the text in a list item respects the size of its parent container and uses an ellipsis when necessary? Here's the scenario:
<?PHP .... code code code ..?>
<TABLE>
<TR>
<TD width=50%> <!-- other TD's with more data exist -->
<DIV> <!-- Below this line is from another dynamically created file -->
<TABLE WIDTH=100%>
<TBODY>
<TR>
<TD> <!-- other TDs even with more data exist -->
<DIV>
<OL><?PHP code that echoes the following LIs from a DB ?>
<LI> <!-- I want this LIs to fill text up to assigned width and then use ellipsis -->
</LI>
</OL>
</DIV>
</TD>
....
When applying the following CSS:
list-style-position:inside;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
All the content inside the list items overflows outside the screen as one long line. If I don't apply this CSS, the list items are displayed on multiple lines (which is not what I want).
If I adjust the width of the parent div or the parent ordered list, the text inside the list items gets cut off, leaving whitespace where the full text would be.
Here is the link to the jsfiddle for reference: https://jsfiddle.net/Fotofobia/kgrccckc/
Any suggestions on how to solve this?
Thank you in advance for your help.