html - 使省略号在 LI 中工作

Question

我已经在这里绞尽脑汁好几个小时了，我似乎找不到问题的答案。

如何让 LI 尊重其父项的大小并正确使用省略号？ 情况如下:

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

如果我使用 CSS:

  list-style-position:inside;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  

这将使 LI 的所有内容都通过屏幕，一行很长。 如果我不使用这个 CSS，那么 LI 会很好地多行化(我当然不想要)。

如果我更改父 DIV 或父 OL 的“WIDTH”，则 LI 中的文本会被截断，但仍会用空格填充全文将占据的所有空间。

更新:这里是 jsfiddle:https://jsfiddle.net/Fotofobia/kgrccckc/

有什么建议吗？

提前致谢。

Answer 1

添加以下代码更新。通过这样做，您将创建一种舞台，所有“生活”在其中的内容现在都可以看到 nowrap 和 overflow 规则。我想这会奏效。请告诉我一些事情! :)

list-style-position:inside;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; 

// Add this to your code
width: 100%;
table-layout: fixed;