I have a problem with text clipping, practically when I set the div to a lower width than the text, it disappears. I want it to clip words as it reduces its size… I tried with overflow: hidden and also text-overflow: clip but it’s not working as I want. Here’s the code, thank you in advance.
.finalCutStyleButton{
width: 90mm;
height: 20mm;
background-color: #b3be9e;
animation: test 2s ease-in;
}
@keyframes test{
from{
width: 90mm;
}
to{
width: 30mm;
}
}
.title{
font-size: 10mm;
font-family: 'SFProBold', sans-serif;
font-weight: bold;
display: inline-block;
width: auto;
}<div class = "finalCutStyleButton adjustPadding">
<h1 class = "title">VIDEO EDITING</h1>
</div>>Solution :
try adding same keyframe logic to the text:
.finalCutStyleButton {
width: 90mm;
height: 20mm;
background-color: #b3be9e;
display: flex;
align-items: center;
animation: test 2s ease-in;
}
@keyframes test {
from {
width: 90mm;
}
to {
width: 30mm;
}
}
.title {
font-size: 10mm;
margin: 0 0;
font-family: "SFProBold", sans-serif;
font-weight: bold;
display: inline-block;
min-width: 100%;
white-space: nowrap;
overflow: hidden;
}<div class="finalCutStyleButton adjustPadding">
<h1 class="title">VIDEO EDITING</h1>
</div>