0
<div class="base">
<div class="headline">
  <svg>
    <clippath id="mask">
      <text dominant-baseline="hanging">Awesome Headline</text>
    </clippath>
  </svg>
</div>
</div>

<style>
body {
  background: url('https://images.pexels.com/photos/2179483/pexels-photo-2179483.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')no-repeat;
  background-size:cover;
  
}
.headline {
  font: 50px system-ui, sans-serif;
  font-weight: 900;
  backdrop-filter:invert(100%);
  clip-path: url(#mask); 
  letter-spacing:30px;
}
.base {
  position:absolute;
  top:20%;
  left:20%;
  width:400px;
  height:auto;
  background-color:red;
  transform: translate(-20%, -20%);
}
</style>

(https://i.stack.imgur.com/iQbqc.png)

I want to do like in this picture.

I don't know if it's because of the svg but it overflows from the width I gave the base class.

what I want to do is to make the text go down to a bottom line

manekko
  • 5
  • 5
  • I assume you really want to show the image background masked by the text? Your screenshot shows only white text in a rectangle - your code doesn' clip/mask anything. Please clarify. – herrstrietzel Dec 06 '22 at 20:01
  • Background doesn't matter, you can remove it. What I want to say overflows with the breadth I have given. I want it to go to the bottom line so that it doesn't overflow. I am trying to do as shown in the picture – manekko Dec 06 '22 at 20:19
  • Unfortunately, svg doesn't have any auto-line wrapping. You need to split your lines into `` elements. As described here: [How to insert line break in svg element?](https://stackoverflow.com/questions/49063695/how-to-insert-line-break-in-svg-tspan-element) – herrstrietzel Dec 06 '22 at 20:35

0 Answers0