html - 文本溢出 : ellipses does not work when parent width is fixed and child width is dynamic

Question

我有一个 parent <div>有多个 child span秒。父 div 的宽度是固定的，但子 span 的宽度可以是动态的。我试过的方式，文本溢出:省略号似乎对 child 不起作用。

<div class="parent">
  <span class="child1"> Content 1</span>
  <span class="child2"> Content 2</span>
  <span class="child3"> Content 3</span>
</div>


.parent {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 200px;
  display: inline-block;
}

span {
  display: inline-block;
}

JsFiddle .

Answer 1

text-overflow不是 inherited属性(property)。这意味着您分配给它的值仅适用于父元素 (.parent) 但不适用于其子元素 (span)。

要解决您的问题，只需将该属性向下移动到子项即可。例如(取决于您的上下文)您可以这样编码:

.parent {  
  border: 1px solid red;
}

span {
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 50px;
  border: 1px solid blue;
  overflow: hidden;
}