See my problem with this screenshot
Hello.
I have a problem with a title with negative letter-sacing.
I solde the problem when text in on one line, but when the text return to line, the last character on of line is cutt off.
.container {
width: 90%;
height: 90%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
overflow: auto;
border-style: solid;
border-color: rgb(255, 0, 0);
text-align: center;
font-family: 'Poppins';
font-weight: 800;
font-size: 60px;
letter-spacing: -4px;
}
.color2 {
padding-right: 10px;
margin-right: -10px;
padding-left: 10px;
margin-left: -10px;
background: -webkit-linear-gradient(45deg, #2BFAFA, #FF00FF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.color3 {
width: 100%;
padding-right: 0.5em;
margin-right: -0.5em;
background: -webkit-linear-gradient(45deg, #2BFAFA, #FF00FF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<div class="container">
<span class="color1">conditions générales </span><span class="color2">de vente</span><br>
<span class="color1">de vente </span><span class="color2">conditions générales</span><br>
<span class="color1">conditions générales </span><span class="color3">de vente</span>
</div>
Have you a solution.
Thanks.
Please see the code pen below with my differrents try :
You need to sign in to view this answers