文本溢出：省略号不起作用

Posted 2023-03-15

【中文标题】文本溢出：省略号不起作用

【英文标题】：text-overflow: ellipsis will not work

【发布时间】：2016-07-15 06:55:34

【问题描述】：

我已经阅读了有关 text-overflow: ellipsis 的相关问题的所有答案，无论我如何应用被认为是必要的属性，如果不从 li 标签中删除它，我就无法让它工作，但是它需要在 li 标签内。任何帮助，将不胜感激！

我已经尝试在显示的每个元素中放置必要的属性，只有 white-space: nowrap 和 overflow: hidden 有效果的地方是它们被放置在此处显示的位置，但 text-overflow: ellipsis 没有影响。我也尝试了带有 display: block 的 li 元素，但无济于事。

li 
  margin-top: 19px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

img 
  display: inline-block;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  box-shadow: 0px 1px 5px black;

.b 
  display: inline-block;
  vertical-align: super;

.b p 
  margin: 5px 5px 5px 15px;

.top-text 
  font-size: 16px;
  color: #65aef8;

.bottom-text 
  font-size: 16px;
  color: #fff;

<ul>
  <li>
    <section class="a">
      <img src="img.png" >
      <section class="b">
        <p class="top-text">Text</p>
        <p class="bottom-text>More Text</p>
           </section>
         </section>
      </li>
     ...
    </ul>

【问题讨论】：

要使用省略号，您需要为其设置宽度限制；

@freestock.tk 目前有 100% 的宽度，但即使是固定宽度，它也不起作用

jsfiddle

让text-overflow:ellipsis/overflow:hidden/whitespace:nowrap 放在<p> 上（另外设置一个width 给它）。在这种情况下，<li> 只是父级。 jsfiddle

@freestock.tk 在具有特定宽度的

【参考方案1】：

将类“b”、元素“p”上的 CSS 更改为此，文本溢出省略号有效：

.b p 
  margin: 5px 5px 5px 15px;
  width: 195px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;