CSS - removing one of the divs if their content cant fit into one line-CodePudding

I have filename div and filesize div in one line, I would like to remove the filesize div if the filename is too long (e.g in case of mobile screen because of not enough space)

[aaaaaa.jpg|51Kb] -> [aaaaaaaaaaa.jpg]

Is there any way to do this in CSS or CSS and JS ?

Thanks, Csaba

UPDATE I have to remove completely the filesize part, to have more space for the filename.

CodePudding user response：

There is at least part of the way to do it by using the CSS ::first-line pseudo element.

This snippet sets the font-size of the container to 0 and then sets it back to something for the first-line.

The filename and filesize divs are displayed inline, so the CSS considers them as part of the first line (and the filesize to be not in the first line if the line has been broken at the space).

Note: this gives the right appearance, but it does not remove the filesize div from the DOM, it just makes it have 0 as dimensions.

.container {
  width: 100vw;
  font-size: 0;
  overflow-x: auto;
  /* this is not essential - put here so you can check */
}

.container::first-line {
  font-size: 1rem;
}

.container>* {
  display: inline;
}

<div >
  <div >https://aratherlongurlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div >123MB</div>
</div>