css - white-space: nowrap distorts my div and is not working properly

Issue

I am currently building some simple card items with angular material. They look like this right now:

Now, notice the lorem ipsum in the middle of the card. My goal is to prevent it from line break and make it text-overflow: ellipsis. I tried all the mentioned solutions about preventing line break. But adding

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

to the span in the middle only distorts the circle on the left side and is not working. This is the result:

It gets much longer than expected (and i cannot even scroll to the right) and the circle looks strange.

Thats my html and css file:

html:

<div class="card"
     [ngClass]="{'red-border': data?.prioritaet === '1', 'gray-border': data?.prioritaet !== 
     '1'}">
  <div class="circle"
       [ngClass]="{'red-filling': data?.status === 'MF', 'gray-filling': data?.prioritaet !== 
'1', 'red-circle-border': (data?.prioritaet === '1' && data?.status === 'EE')}">
    <span class="status dark-letters"
          [ngClass]="{'bright-letters': (data?.prioritaet === '1' && data?.status === 'EE')}">
      {{ data?.status }}
    </span>
  </div>

  <div class="card-container">
    <div class="row1">
      <div *ngIf="data?.nummerFormatiert" class="item">
        <kendo-svg-icon
          class="card-title-item-icon"
          [icon]="icons.lan"
        ></kendo-svg-icon
        ><span class="card-title-item">{{ data?.nummerFormatiert }}</span>
      </div>

      <div *ngIf="data?.status" class="item">
        <kendo-svg-icon
          class="card-title-item-icon"
          [icon]="icons.lan"
        ></kendo-svg-icon
        ><span class="card-title-item">{{ data?.status }}</span>
      </div>

      <div *ngIf="data?.einsatzort" class="item">
        <kendo-svg-icon
          class="card-title-item-icon"
          [icon]="icons.account"
        ></kendo-svg-icon
        ><span class="card-title-item">{{ data?.einsatzort }}</span>
      </div>

      <div *ngIf="data?.prioritaet" class="end-item">
        <span class="card-title-item">Prio: {{ data?.prioritaet }}</span>
      </div>
    </div>

    <div class="row2">
      <div class="middle-item">
        <kendo-svg-icon
          class="card-title-item-icon"
          [icon]="icons.clock"
        ></kendo-svg-icon>
        <span class="long-text">
          Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel 
lectus. Donec odio urna, tempus molestie,
          Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel 
lectus. Donec odio urna, tempus molestie,
          Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel 
lectus. Donec odio urna, tempus molestie,
        </span>
      </div>
    </div>

    <div class="row3">
      <div *ngIf="data?.beginn" class="item">
        <kendo-svg-icon
          class="card-title-item-icon"
          [icon]="icons.clock"
        ></kendo-svg-icon>
        <span class="card-title-item">
          {{ data?.beginn | date: 'dd.MM.yy, HH:mm:ss' }}
        </span>
      </div>

      <div *ngIf="data?.status" class="item">
        <kendo-svg-icon
          class="card-title-item-icon"
          [icon]="icons.lan"
        ></kendo-svg-icon
        ><span class="card-title-item">{{ data?.status }}</span>
      </div>

      <div *ngIf="data?.prioritaet" class="item">
        <kendo-svg-icon
          class="card-title-item-icon"
          [icon]="icons.account"
        ></kendo-svg-icon
        ><span class="card-title-item">{{ data?.prioritaet }}</span>
      </div>

      <div *ngIf="data?.prioritaet" class="item">
        <kendo-svg-icon
          class="card-title-item-icon"
          [icon]="icons.account"
        ></kendo-svg-icon
        ><span class="card-title-item">{{ data?.prioritaet }}</span>
      </div>

      <div *ngIf="data?.prioritaet" class="item">
        <kendo-svg-icon
          class="card-title-item-icon"
          [icon]="icons.account"
        ></kendo-svg-icon
        ><span class="card-title-item">{{ data?.prioritaet }}</span>
      </div>

      <div *ngIf="data?.prioritaet" class="end-item">
        <kendo-svg-icon
          class="card-title-item-icon"
          [icon]="icons.account"
        ></kendo-svg-icon
        ><span class="card-title-item">{{ data?.prioritaet }}</span>
      </div>
    </div>
  </div>


</div>

The scss file:

.card {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.25em;

  &.red-border {
    border-left: 3px solid #E57373;
  }

  &.gray-border {
    border-left: 3px solid #A6A9AF;
  }

  &.white-border {
    border-left: 3px solid #E2E3E5;
  }
}

.circle {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;

  &.red-filling {
    background: #E57373;
  }

  &.gray-filling {
    background: #A6A9AF;
  }

  &.white-filling {
    background: #E2E3E5;
  }

  &.red-circle-border {
    width: 46px;
    height: 46px;
    border: 2px solid #E57373;
  }

  &.gray-circle-border {
    border: 2px solid #A6A9AF;
  }

  &.white-circle-border {
    border: 2px solid #E2E3E5;
  }
}

.status {
  font-weight: 700;

  &.dark-letters {
    color: #151B27;
  }

  &.bright-letters {
    color: #C8CACE;
  }
}

.card-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
}

.card-title-item-icon {
  margin-right: 8px;
}

.row1 {
  display: flex;
}

.row2 {
  display: flex;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 14px;
}

.row3 {
  display: flex;
  font-size: 14px;
}

.middle-item {
  flex-grow: 1;
}

.item {
  margin-right: 15px;
}

.long-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.end-item {
  margin-left: auto;
  margin-right: 10px;
}

Does anyone know why my code does this and how I can fix this? Thank you in advance!

Solution

While this is a complex topic, I implemented one way of doing it by using the webkit-line-clamp CSS property:

I tried to replicate the HTML structure as in your example:

.circle {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
}

.circle.gray-filling {
  background: #a6a9af;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.row {
  display: flex;
  justify-content: space-between;
}

.container *:not(:last-child) {
  margin-bottom: 8px;
}

.card {
  border: 1px solid black;
  display: flex;
  padding: 8px;
  margin: 0 8px;
}

.flex-fill {
  flex: 1;
}

.no-shrink {
  flex-shrink: 0;
}

.card-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.text-container {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

<div class="container">
  <div class="card">
    <div class="circle gray-filling no-shrink">EL</div>
    <div class="card-container flex-fill">
      <div class="row">
        <div class="icon-container">
          <span>icon</span>
          <span>icon2</span>
          <span>icon3</span>
        </div>
        <div>Prio: 3</div>
      </div>
      <div class="row">
        <div class="text-container">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </div>
      </div>
      <div class="row">
        <div class="icon-container">
          <span>icon</span>
          <span>icon2</span>
          <span>icon3</span>
        </div>
        <div>users 3</div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="circle gray-filling">MF</div>
    <div class="card-container flex-fill">
      <div class="row">
        <div class="icon-container">
          <span>icon</span>
          <span>icon2</span>
          <span>icon3</span>
        </div>
        <div>Prio: 3</div>
      </div>
      <div class="row">
        <div class="text-container">
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est
          laborum.
        </div>
      </div>
      <div class="row">
        <div class="icon-container">
          <span>icon</span>
          <span>icon2</span>
          <span>icon3</span>
        </div>
        <div>users 3</div>
      </div>
    </div>
  </div>
</div>

I copied your circle class, but did not use all the stuff for brevity.

It gets much longer than expected (and i cannot even scroll to the right) and the circle looks strange. Does anyone know why my code does this and how I can fix this?

Apparently the circle gets squeezed because the browser cannot figure out exactly how to divide the space between the circle and the rest of your card. I fixed this by adding the flex-fill class to the card-container. That is nothing more than flex: 1; so that the circle keeps its size, and the rest of the remaining width goes to the card-container. For small enough widths, the squeeze can still happen. If you don't want this behavior at all, then add the flex-shrink: 0; to the circle element.

Answered By - Octavian Mărculescu