CSS 空白 nowrap 扩展 flexbox 的子宽度

Question

I'm learning CSS and I'm having a problem with text-overflow. I have a flex-box with two child. I want child 2 fit into its parent and the text-content will be cut if it too long. But when I add white-space: nowrap to text then child-2 width is expanded. What did I do wrong here ?

 .parent { display: flex; flex-wrap: nowrap; max-width: 200px; margin-right: 20px; margin-bottom: 20px; padding: 15px; border: 1px solid black; } .child-1 { white-space: nowrap; border: 1px solid black; margin-right: 20px; } .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid red; }

 <div class="parent"> <div class="child-1">This is child 1</div> <div class="child-2"> <div class="text">A really long long long long text</div> <div class="text">Another really long long long long text</div> </div> </div>

Answer 1

That's what white-space: nowrap does - it stops the text from breaking at white space and wrapping to a new line.

Your .parent is set at a max-width: 200px so child-2 it cannot grow to to fit the longer text, and the single line is too long to fit into the space beside child-1, so it has to extend outside the parent - there is nowhere else for it to go.

I presume what you want to do is hide the part of the text that is extending out from the parent?

To do that you can use overflow to hide any content that extends outside of the child-2 div like this:

.child-2 { overflow:hidden; }

See more about the overflow property here: Mozilla MDN Web Docs

Example hiding the overflow:

 .parent { display: flex; flex-wrap: nowrap; max-width: 200px; margin-right: 20px; margin-bottom: 20px; padding: 15px; border: 1px solid black; } .child-2{ overflow:hidden; } .child-1 { white-space: nowrap; border: 1px solid black; margin-right: 20px; } .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid red; }

 <div class="parent"> <div class="child-1">This is child 1</div> <div class="child-2"> <div class="text">A really long long long long text</div> <div class="text">Another really long long long long text</div> </div> </div>