How to truncate text in a flex container(With properties in the text to truncate already placed)?

Question

As the title says,this is the problem. (Before I've taken a look at all the questions/answers there are about this topic but they don't solve my problem)

I have a template area called testItem which it's a flex container and inside this I've got a h6 element and it has the css properties: overflow: hidden, white-space: nowrap and text-overflow: ellipsis so it so I should have truncated the text but not and this moves the containers below (I don't want this).

The flex container, which template area is called testItem continue growing by its content (the h6 element) but is not truncated.

I've tried: add min-width:0 property to the flex container or flex: 1, flex-grow: 0 but it doesn't work. The only possibility is to put max-width: Xpx but that's not good enough because of If I've got a long text with a big screen resolution, this text decentralize the rest of the containers...

I want to truncate the text in X resolution so that the container does not continue growing for this content and that the rest of elements remain fixed (but that this is responsive, therefore I can not use fixed units)

Note: If you need further clarification I have no problem resolving them :)

Note2: I attached a CodeSandbox link: https://codesandbox.io/s/03o4x2r33n

Thanks in advance!

The attached code and its execution

.tagsItem {
  grid-area: tags-item;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.testItem {
  grid-area: test-item;
  height: 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.firstDatesItem {
  grid-area: first-dates-item;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.secondDatesItem {
  grid-area: second-dates-item;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.datesItem {
  grid-area: dates-item;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.patientItem {
  grid-area: patient-item;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.endoscopyContainer {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-areas: "tags-item test-item dates-item patient-item";
  grid-template-columns: 1fr 2fr 3.5fr 3.5fr;
  column-gap: 0.5em;
  justify-items: start;
  align-items: center;
}

.dividerContainer {
  margin-left: 5px;
}

.priorityCard {
  height: 1.8em;
  width: 8em;
  border: 1px solid pink;
  border-radius: 20px;
  color: red;
  text-align: center;
  background: #e5737347;
}

.statusCard {
  height: 1.8em;
  width: 8em;
  border: 1px solid pink;
  border-radius: 20px;
  color: green;
  text-align: center;
}

.applicationTypeCard {
  height: 1.8em;
  width: 8em;
  border: 1px solid pink;
  border-radius: 20px;
  color: blue;
  text-align: center;
  background: #9ecd601f;
}

.testCodeLabel {
  color: grey;
}

.testNameLabel {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="endoscopyContainer">
  <div class="tagsItem">
    <h6 class="priorityCard">Example</h6>
    <h6 class="statusCard">Example2</h6>
    <h6 class="applicationTypeCard">Example3</h6>
  </div>
  <div class="testItem">
    <h6 class="testNameLabel">
      Text that I want to truncate but is still growing its container because of it
    </h6>
    <h6 class="testCodeLabel">12312ASD</h6>
  </div>
  <div class="datesItem">
    Dates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates Example
  </div>
  <div class="patientItem">
    Patient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient
  </div>
</div>

you have *invalid* css - only one set of quotes in the `grid-template-areas` is required, and for `grid-area` quotes are not required... see [corrected sandbox](https://codesandbox.io/s/l0mn1935m) — kukkuz, Feb 28 '19 at 11:16

score 0 · Accepted Answer · answered Feb 28 '19 at 11:10

You can add a width propertie to your testNameLabel like so:

.testNameLabel {
  width: 15vw;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tagsItem {
  grid-area: "tags-item";
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.testItem {
  grid-area: "test-item";
  height: 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.firstDatesItem {
  grid-area: "first-dates-item";
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.secondDatesItem {
  grid-area: "second-dates-item";
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.datesItem {
  grid-area: "dates-item";
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.patientItem {
  grid-area: "patient-item";
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.endoscopyContainer {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-areas: '"tags-item test-item dates-item patient-item"';
  grid-template-columns: 1fr 2fr 3.5fr 3.5fr;
  column-gap: 0.5em;
  justify-items: start;
  align-items: center;
}

.dividerContainer {
  margin-left: 5px;
}

.priorityCard {
  height: 1.8em;
  width: 8em;
  border: 1px solid pink;
  border-radius: 20px;
  color: red;
  text-align: center;
  background: #e5737347;
}

.statusCard {
  height: 1.8em;
  width: 8em;
  border: 1px solid pink;
  border-radius: 20px;
  color: green;
  text-align: center;
}

.applicationTypeCard {
  height: 1.8em;
  width: 8em;
  border: 1px solid pink;
  border-radius: 20px;
  color: blue;
  text-align: center;
  background: #9ecd601f;
}

.testCodeLabel {
  color: grey;
}

.testNameLabel {
 width: 15vw;
 font-weight: bold;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="index.css" rel="stylesheet" type="text/css" />
    <title>Static Template</title>
  </head>
  <body>
    <div class="endoscopyContainer">
      <div class="tagsItem">
        <h6 class="priorityCard">Example</h6>
        <h6 class="statusCard">Example2</h6>
        <h6 class="applicationTypeCard">Example3</h6>
      </div>
      <div class="testItem">
        <h6 class="testNameLabel">
          Text that I want to truncate but is still growing its container
          because of it
        </h6>
        <h6 class="testCodeLabel">12312ASD</h6>
      </div>
      <div class="datesItem">
        Dates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates
        ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates
        ExampleDates Example
      </div>
      <div class="patientItem">
        Patient ExamplePatient ExamplePatient ExamplePatient ExamplePatient
        ExamplePatient ExamplePatient ExamplePatient ExamplePatient
        ExamplePatient ExamplePatient
      </div>
    </div>
  </body>
</html>

Thank you @MaximeB! It's a good solution with plain screen but the problem is that to the left I have a contextual menu so if I opened it the text would remain overlayed because it would be in the 16vw :S — frangaliana, Feb 28 '19 at 12:14
I've tried it and it works well! You've my 10! Thank you so much! — frangaliana, Feb 28 '19 at 13:17

How to truncate text in a flex container(With properties in the text to truncate already placed)?

1 Answers1