0

I want to fit div.title with lorem ipsum(...) on the page using CSS ellipsis, but I want to use it on many resolutions so I can't hardcode width in pixels.

Firstly, I have seen answers for similar issues like my, but unfortunately it has not helped in my case. I struggle with seemingly easy issue. I have a header with few boxes inside and one title which could be (but it doesn't have to) very long. I am pretty sure that I need to use text-overflow: ellipsis; here. The problem is because I need to handle many resolution, minimum from HD to 4K. Is there some better idea to do this than setting media-queries for each resolution? I would like to set one width/max-width and don't worry about siblings of this div.title, just get the available width without crushing whole header. My case:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

section {
  display: flex;
  align-items: flex-start;
}

.header {
  display: flex;
  background-color: #ccc;
}

.left, .right {
  display: flex;
}

.title {
  background-color: lightcoral;
  color: white;
  font-size: 40px;
}

.title span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.c-1, .c-2, .c-3 {
  height: 65px;
}

.c-1 {
  background-color: tomato;
  width: 65px;
}

.c-2 {
  background-color: darkblue;
  width: 300px;
}

.c-3 {
  background-color: yellow;
  width: 840px;
}
<section>
  <header class="header">
    <div class="c-1"></div>
    <div class="left">
      <div class="c-2"></div>
      <div class="title">
        <span>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae corporis unde, iure aperiam nobis odit possimus distinctio veritatis aspernatur adipisci nam velit dicta minima quod soluta rem deleniti tempore libero?
        </span>
      </div>
    </div>
    <div class="right">
      <div class="c-3"></div>
    </div>
  </header>
</section>
sosick
  • 624
  • 3
  • 17
  • 35
  • What exactly is your issue? Your example includes a lot of code, so it makes it hard to isolate the actual question – GalAbra Sep 10 '21 at 12:40
  • I don't understand anything... we need to see designs of how it should look like for each width or those media queries you've mentioned in order to assist – vsync Sep 10 '21 at 12:40
  • @GalAbra I need to fit huge title without setting width (or setting it dynamicly) without crushing page on many resolution. I have edited my code snippet. I want to set this code on screens form HD to 4K without crushing header. Now issue is visible in snippet. – sosick Sep 10 '21 at 14:06
  • you are using a lot of nested flexbox and I don't think it's needed. You have to add many `min-width:0` so add `*{min-width:0}` – Temani Afif Sep 10 '21 at 14:28

0 Answers0