最大宽度的内联块不带省略号

Question

I had a block element in it there is a inline , and another inline that holds a coloured bullet (used as a mark for the text).

 .label-container { width: 160px; /* const width*/ } .label { display: block; max-width: calc(100% - 1em); /* const max-width (parent - ~.highlighted mark)*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .highlighted-mark:after { content: '●'; } 

 <div class="label-container"> <span class="label">Label</span> <span class="highlighted-mark"></span> </div> 

The text sometimes overflows from the block so I need limiting this and adding an ellipsis in case this happens (ellipsis between after the text, before the mark.

In order to let the ellipsis show I had to turn the text element to a block with constant width. For the block to act inline -ish (it had to behave as an uniform inline text) I added the float: left .

I want to get other inline display properties that I do not get as it is above and I also do not want to do such a bad parctice (forcing inline properties onto a block only because of the need of ellipsis). I did not like this use of reduction of widths in order to fill the parent .label-container ; I'd hope for something like flex-grow if it'd have act like max-width . [I already tried inline-block , which is enough for me regarding its inline -like-properties, but it won't work! I prefer not using dotdotdot though I have a license].

Any proposal for a change? :{

Answer 1

You can probably try flexbox like this:

 .label-container { width: 160px; /* const width*/ border:1px solid; display:flex; } .label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .highlighted-mark:after { content: '●'; } 

 <div class="label-container"> <span class="label">Label</span> <span class="highlighted-mark"></span> </div> <div class="label-container"> <span class="label">very looooooooong Label</span> <span class="highlighted-mark"></span> </div>