用省略号截断浮动div内容

Question

I'm looking to create a dynamic layout in CSS that truncates text in a floated div using text-overflow: ellipsis in a way that takes into account the size of sibling elements

The layout consists of 3 divs

|--------------------A-------------------|
||------B------||-------C-------|        |
|| Hello world || Goodbye world |        |
||-------------||---------------|        |
|----------------------------------------|

• Div A: Wrapper parent
• Div B: show as much content as possible, and truncate to ellipsis if not enough space
• Div C: all of this content should always be visible. The width of this content is not fixed (but will always be <50% of the width of div A) . If the content in B is not truncated, this div should directly beside div B.

And in the case there div B should truncate text, I want it to look like:

|--------------------A-------------------|
||------B--------------||-------C-------||
|| Hello world this ...|| Goodbye world ||
||---------------------||---------------||
|----------------------------------------|

I can get the general layout set up, but my problem is I cannot trigger Div B to truncate the content when needed. My code so far:

 #wrapper { max-width: 300px; } #div-b { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; float: left; margin-right: 5px; } #div-c { color: #6a7d80; white-space: nowrap; } 

 <div id="wrapper"> <div id="div-b">This is my really long message hello world hello world hello world </div> <div id="div-c">Goodbye world</div> </div> 

Adding a max-width to div B works, but the problem is that the content in div C does change so I cannot hardcode a max-width value that works in all cases.

I'm starting to think this isn't possible without javascript. Any ideas?

Answer 1

Just use flexible boxes :

#wrapper {
    display: flex;
}

 .wrapper { display: flex; border: 1px solid red; } .w1 { max-width: 300px; margin-bottom: -1px; } .w2 { max-width: 600px; } .div-b { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-right: 5px; } .div-c { color: #6a7d80; white-space: nowrap; } 

 <div class="wrapper w1"> <div class="div-b">This is my really long message hello world hello world hello world </div> <div class="div-c">Goodbye world</div> </div> <div class="wrapper w2"> <div class="div-b">This is my really long message hello world hello world hello world </div> <div class="div-c">Goodbye world</div> </div> 

That is enough on Firefox. But for webkit browsers, you may also need

#div-b {
    width: 0;               /* Reduce width as much as necessary */
    flex-grow: 1;           /* Grow to fill remaining space */
    max-width: max-content; /* But don't grow too much */
}

Note that max-content has much limited browser support, and currently require vendor extensions.

 .wrapper { display: flex; border: 1px solid red; } .w1 { max-width: 300px; margin-bottom: -1px; } .w2 { max-width: 600px; } .div-b { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-right: 5px; width: 0; flex-grow: 1; max-width: -moz-max-content; max-width: -webkit-max-content; max-width: max-content; } .div-c { color: #6a7d80; white-space: nowrap; } 

 <div class="wrapper w1"> <div class="div-b">This is my really long message hello world hello world hello world </div> <div class="div-c">Goodbye world</div> </div> <div class="wrapper w2"> <div class="div-b">This is my really long message hello world hello world hello world </div> <div class="div-c">Goodbye world</div> </div>