使省略号在 LI 中起作用答案

【问题标题】：Making ellipsis to work in a LI使省略号在 LI 中起作用
【发布时间】：2017-06-05 23:32:46
【问题描述】：

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

如何让 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 的“宽度”，则 LI 内的文本会被截断，但仍会用空格填充全文将占用的所有空间。

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

有什么建议吗？

提前致谢。

【问题讨论】：

你有没有机会拼凑一个代码 sn-p 来显示你在做什么？您的帖子中有 jsfiddle 还是 sn-p？
在您的 html 中，您有 “我希望此 LI 将文本填充到指定的宽度，然后使用省略号” 您指定的宽度在哪里？如果你给它一个宽度或最大宽度codepen.io/anon/pen/GEgwJv，它就可以工作
@KenH。我想在这里扔一些小提琴，但代码分布在几个 PHP 文件之间 - 我正在使用 javascript 填充 DIV 和表格。这就是为什么我尽量简化它
@MichaelCoker 我希望它像那样工作——第一个应该分隔 DIV 的内容，第二个应该只占用包含的 DIV（根据其 TD 父级为 50%）——但它根本没有这样做......

这些宽度无效。删除%，但无论如何你都不应该使用内联样式。 width 属性在 html5 w3.org/TR/html5/obsolete.html 中已过时，您应该改用 CSS。给他们上课，然后将width: 50%; 应用到课程中。

标签： html css html-lists ellipsis

【解决方案1】：

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

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

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

【讨论】：