line clamp css code example
Example 1: css line-clamp
.line-clamp{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
Example 2: text-overflow: ellipsis; 2 line
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
Example 3: clamp css
font-size: clamp(1rem, 2.5vw, 2rem);
font-size: clamp(1.5rem, 2.5vw, 4rem);
font-size: clamp(1rem, 10vw, 2rem);
Example 4: css clamp
width: clamp(400px, 60vw, 600px);
div {
font-size: clamp(1.1rem, 0.7153rem + 1.6368vw, 1.5rem);
}
.logo {
width: clamp(350px, 75%, 800px);
}
And the font’s CSS is:
.title {
font-size: clamp(1.5rem, 5vw, 4rem);
}