Text Overflow ellipsis not working in CSS

Issue

I have the below code where I am trying to use ellipsis but it is not working.

I think I need to give some width to the head-text but I am not sure what should be the width as I need it to be responsive.

I am trying my code here- https://www.w3schools.com/code/tryit.asp?filename=GUQKRVTS14F1

.c-vis__head-section {
  padding: 32px 60px 30px 32px;
  border-bottom: 2px solid #ddd;
  border-left: 4px solid transparent;
}

.c-vis__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 20px;
}

.c-vis__head-left {
  display: flex;
  align-items: center;
  justify-content: end;
}

.c-vis__number {
  width: 36px;
  height: 35px;
  justify-content: center;
  display: flex;
  align-items: center;
  margin-right: 25px;
  color: #333;
}

.c-vis__head-text {
  font-size: 20px;
  font-weight: normal;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-vis__duration {
  font-size: 16px;
  color: red;
}

<div class="c-vis__head-section">
  <div class="c-vis__heading">
    <div class="c-vis__head-left">
      <div class="c-vis__number">1</div>
      <h3 class="c-vis__head-text">Morals</h3>
    </div>
    <label class="c-vis__duration">3 Weeks</label>
  </div>
  <p class="c-vis__para">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. </p>
</div>

<div class="c-vis__head-section">
  <div class="c-vis__heading">
    <div class="c-vis__head-left">
      <div class="c-vis__number">2</div>
      <h3 class="c-vis__head-text">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</h3>
    </div>
    <label class="c-vis__duration">3 Weeks</label>
  </div>
  <p class="c-vis__para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>

Solution

Here is the most precise answer, responsive and irrespective of text in c-vis__duration:

.c-vis__head-left {
    display: flex;
    align-items: center;
    justify-content: start;
    overflow: hidden; // Add this
}

.c-vis__duration {
    font-size: 16px;
    color: red;
    flex-shrink: 0; // Add this
}

.c-vis__head-section {
  padding: 32px 60px 30px 32px;
  border-bottom: 2px solid #ddd;
  border-left: 4px solid transparent;
}

.c-vis__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 20px;
}

.c-vis__head-left {
  display: flex;
  align-items: center;
  justify-content: start;
  overflow: hidden;
}

.c-vis__number {
  width: 36px;
  height: 35px;
  justify-content: center;
  display: flex;
  align-items: center;
  margin-right: 25px;
  color: #333;
}

.c-vis__head-text {
  font-size: 20px;
  font-weight: normal;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-vis__duration {
  font-size: 16px;
  color: red;
  flex-shrink: 0;
}

<div class="c-vis__head-section">
  <div class="c-vis__heading">
    <div class="c-vis__head-left">
      <div class="c-vis__number">1</div>
      <h3 class="c-vis__head-text">Morals</h3>
    </div>
    <label class="c-vis__duration">3 Weeks</label>
  </div>
  <p class="c-vis__para">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. </p>
</div>

<div class="c-vis__head-section">
  <div class="c-vis__heading">
    <div class="c-vis__head-left">
      <div class="c-vis__number">2</div>
      <h3 class="c-vis__head-text">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit 58l8l8lutl </h3>
    </div>
    <label class="c-vis__duration">35 Weeks</label>
  </div>
  <p class="c-vis__para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>

Answered By - Harshit Rastogi