如何使省略号在具有动态宽度（flex：1）的flex项目上工作？

Question

I'm trying to implement white-space: nowrap; and text-overflow: ellipsis; on a flex:1; div without setting the max-width . I want it to adjust to the width flex:1 gives.

Here is a fiddle that explains what I want and what actually happens: https://jsfiddle.net/dani3l/6y04bvu1/13/

I'd like to keep the solution css only if possible.

Thanks in advance!

Answer 1

You can try this in your flex:1 class:

.flex-1, .flex-1 > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Here is a snippet to show this.

 .flex-container { display: flex; align-items: center; height: 50px; width: 120px; padding: 0 10px; background-color: black; } .flex-1 { flex: 1; color: white; } .flex-1, .flex-1 > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

 <div class="flex-container"> <div class="flex-1"> This is very long text. </div> </div> <br> <br> <div class="flex-container"> <div class="flex-1"> <div> Child divs work too </div> <br /> <span> Child spans work too </span> </div> </div> 

I found Larry Gordon's Codepen that helped me with this.

Answer 2

要应用文本溢出：省略号，您必须提供width或max-width，否则它不知道需要在哪里停止。