0

Ok, so the only solution I found was to put a max-width, but the problem is that doing so will only work for certain screen sizes. Is there a better way of doing this?

<div style="display: inline-flex; width:100%;">
    <span style="display: inline-flex; color: grey; font-size: 12px; margin-right: 10px;">1
    </span>
    <span style="overflow-wrap:break-word; ">123456789012345678901234567890 123456 1234567890123456 //long text is hidden as it overflows the parent width, the only way to solve this is using break-word:break-all;
    </span>
</div>

So using break-word:break-all; cause the word to break in half making it more difficult to read, that's also a problem.

I can only use flex-box too, because I am using React.

Using width: 40% doesn't work for all screen sizes.

Any other solution?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
dms
  • 129
  • 1
  • 1
  • 8
  • Does `overflow: scroll;` or `overflow: hidden;` suit you? – Felk Feb 15 '18 at 20:43
  • scroll makes things "ugly", hidden is also bad, because it's not user-friendly. Imagine someone reading a table and wondering what he is looking at. – dms Feb 15 '18 at 20:48
  • if you want help with flex, include the relevant tags ;) or you won't bring the attention of super-flex-man :) – Temani Afif Feb 15 '18 at 20:56
  • 1
    Or maybe both those and this: https://stackoverflow.com/questions/47400564/flexbox-width-variation-with-content-should-be-fixed-width/47400907#47400907 – Asons Feb 15 '18 at 21:25
  • The problem with the first one is that the container needs "flex-inline" so that both the first span and the second span are on the same line. Aside, that it works. So how do you fix it if you need "flex-inline" on the container level? – dms Feb 15 '18 at 21:51
  • You don't need `inline-flex` for that, also `flex` will line them up side-by-side, so simply drop `inline-` and `width: 100%`. FYI, `inline-flex` doesn't mean its children will be `inline`, it means the container will be `inline`, just like `inline-block` does to a `div`, but not its children. – Asons Feb 15 '18 at 22:07
  • If you still need the container itself to be `inline-flex`, also give it a `max-width: 100%`, and it will behave very much as when having `flex`. – Asons Feb 16 '18 at 09:29

0 Answers0