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>CodePudding user response：
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>CodePudding user response：
Just add max-width for the heading container so that it won't overflow.
.c-vis__head-left {
max-width: 87%;
}By adding this your problem will be fixed.
Here is the working code snippet
.c-vis__head-section {
padding: 32px 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;
}
.c-vis__head-left {
max-width: 87%;
}<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>Codepen here
CodePudding user response：
You're missing max-width: 100% of overflow: hidden on c-vis__head-left