CSS。不起作用文本溢出 : ellipsis

Question

我有这样的东西:

<div>
  <span>
    text text text text text text
  </span>
</div>

div{
  width:100px;
  border: 1px solid black;
  line-height: 12px;
  height: 16px;
  position: relative;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

span{
  position: absolute;
  overflow: hidden; 
  text-overflow: ellipsis;
}

而且省略号不起作用。我不一定需要使用 position: absolute，但结果我应该有文本，不会扩展 div 和截断宽度省略号。

附言样本包含 div 的宽度，实际上 div 宽度是未知的。

Answer 1

我不知道为什么你需要 span 标签的绝对位置，但这并不重要。

Span 标签应具有“宽度”CSS 规则来解决您的问题。对于您的示例:

span {
   width:100%;
}

所以每次你想使用 overflow:ellipsis 选项时，你都必须指定目标元素的宽度。