文本溢出：当父宽度固定且子宽度为动态时，省略号不起作用答案

【问题标题】：text-overflow: ellipses does not work when parent width is fixed and child width is dynamic文本溢出：当父宽度固定且子宽度为动态时，省略号不起作用
【发布时间】：2017-06-25 09:02:58
【问题描述】：

我有一个父 <div>，它有多个孩子 spans。父 div 的宽度是固定的，但子跨度的宽度可以是动态的。我尝试过的方式，文本溢出：省略号似乎不适用于孩子。

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

【问题讨论】：

标签： html css

【解决方案1】：

text-overflow 不是 inherited 属性。这意味着您为其分配的值仅适用于父元素 (.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;
}

【讨论】：

但是span的宽度不是固定的，它是动态的。我只知道父元素的最大宽度。
在这种情况下，无论您将该属性放在哪里，它都不起作用。您的 span 元素必须具有固定长度 @MananShah
这就是问题所在！跨度的长度是可变的，而父级的宽度是固定的。可能有一个灵活的解决方案。

【解决方案2】：

如果子元素的宽度是动态的，则必须将其样式更改为：

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

您还必须将父级的显示属性更改为 flex：

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

【讨论】：

但是span的宽度不是固定的，它是动态的。我只知道父元素的最大宽度。
我明白了。我编辑了我的答案。您必须添加溢出：隐藏；文本溢出：省略号；更改为子元素的样式并将父元素的显示属性更改为flex。我在你的小提琴中对其进行了测试，它奏效了。
然后它将椭圆应用于所有跨度，我希望椭圆仅应用于溢出的跨度。不过感谢您的努力。

【解决方案3】：



    .parent {
      max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
    }

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

【讨论】：

跨度是内联块而不是内联元素。如果你让它们 inline -block 它不起作用。
所以你需要在不同的行中跨度？
没有同一行，但它们有自己的顶部和底部边距。所以我不能让它们内联，它们必须是内联块。
是的，但如果你使用内联块，文本溢出：省略号将不起作用
省略号将起作用，当您将内联块提供给跨类“child1”时。

【解决方案4】：

我猜它正在工作。

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

span {
  display: inline-block;
}

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

【讨论】：

我想要文本溢出：省略号；去工作。正确知道它没有在溢出时显示省略号。