Keep text inside clip path-CodePudding

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==&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 >
    <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>

CodePudding user response：

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==&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 >
    <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>