Text cut off with gradient fill and negative letter-spacing when return to line

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 :

See my CodePen

You need to sign in to view this answers

Related Post