Keep text inside clip path

Question

How can I prevent the text from overflowing inside this clip path? I've tried searching for solutions here and shape-outisde was advised but seems to not work in my case.

header {
  height: 600px;
  background-image: url('https://images.unsplash.com/photo-1519197924294-4ba991a11128?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8d2Fyc2F3fGVufDB8fDB8fA%3D%3D&w=1000&q=80');
}

.circle {
  background: red;
  height: 100%;
  clip-path: circle(39.3% at 23% 14%);
  shape-outside: circle(39.3% at 23% 14%);
}

<header>
  <div class="circle">
    <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
    </p>
  </div>
</header>

score 0 · Accepted Answer · answered Jun 21 '22 at 18:08

Define a width on your p.

header {
  height: 600px;
  background-image: url('https://images.unsplash.com/photo-1519197924294-4ba991a11128?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8d2Fyc2F3fGVufDB8fDB8fA%3D%3D&w=1000&q=80');
}

.circle {
  background: red;
  height: 100%;
  clip-path: circle(39.3% at 23% 14%);
  shape-outside: circle(39.3% at 23% 14%);
  position: relative;
}

.circle > p {
  width: 50%;
}

<header>
  <div class="circle">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident
      similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid.
      Reprehenderit,
    </p>
  </div>
</header>

Keep text inside clip path

1 Answers1