当父元素宽度固定而子元素宽度动态时，text-overflow: ellipsis无法正常工作。

Question

我有一个父级<div>，它有多个子span。父

的宽度是固定的，但子的宽度可以是动态的。我尝试过的方法是，在子元素上使用文本溢出: 省略号似乎不起作用。

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

- Manan Shah

Answer 1

如果子元素的宽度是动态的，您需要更改它们的样式为：

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

你还需要将父元素的 display 属性更改为 flex：

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

- Kaloyan

---

但是span的宽度不是固定的，而是动态的。我只知道父元素的最大宽度。 - Manan Shah

我理解了。我编辑了我的答案。您必须将overflow: hidden; text-overflow: ellipsis;添加到子元素的样式中，并将父元素的display属性更改为flex。我在您的fiddle中进行了测试，它可以正常工作。 - Kaloyan

然后它将省略号应用于所有的span，我希望省略号只应用于溢出的span。感谢你的努力。 - Manan Shah

@Kaloyan，为什么我们要在这里使用flex？ - Gardezi

Answer 2

text-overflow 不是一个继承属性。这意味着你分配给它的值仅适用于父元素（.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;
}

- Billal Begueradj

---

但是span的宽度不是固定的，它是动态的。我只知道父元素的最大宽度。 - Manan Shah

无论你将属性放在哪里，它都不会起作用。你的 span 元素必须具有固定长度。@MananShah - Billal Begueradj

这就是问题所在！跨度的长度是可变的，而父元素的宽度是固定的。可能有一个弹性解决方案。 - Manan Shah

Answer 3

<div data-lang="js" data-hide="false" data-console="true" data-babel="false" class="snippet">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    .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>

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

- emrebiberoglu

---

我想让text-overflow: ellipsis;生效。现在它在溢出时没有显示省略号。 - Manan Shah