円状の要素の中にテキストを収める

Result

円の中にテキストが自動で収まるようになっています

円はradial-gradientを、回り込みはshape-outsideを用いますので、まだ実用向けとは言えません

css

.quote-wrapper {/*親*/
  width: 300px;
  height: 300px;
  position: relative;
  margin: 10vh auto 0; 
}

.text {
  width: 100%;
  height: 100%;
  /*円形グラデーション*/
  background: radial-gradient(
    ellipse at center,
    rgba(0, 128, 172, 1) 0%,
    rgba(0, 128, 172, 1) 70%,
    rgba(0, 128, 172, 0) 70.3%
  );
  position: relative;
  margin: 0;
  color: white;
}

.text p {/*中のテキスト*/
  height: 100%;
  line-height: 1.25;
  padding: 0;
  text-align: center;
  font-style: italic;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

/*疑似要素で回り込み指定*/
.text::before {
  content: "";
  width: 50%;
  height: 100%;
  float: left;
  shape-outside: polygon(
    0 0,
    98% 0,
    50% 6%,
    23.4% 17.3%,
    6% 32.6%,
    0 50%,
    6% 65.6%,
    23.4% 82.7%,
    50% 94%,
    98% 100%,
    0 100%
  );
  shape-margin: 7%;
}

.text p::before {
  content: "";
  width: 50%;
  height: 100%;
  float: right;
  shape-outside: polygon(
    2% 0%,
    100% 0%,
    100% 100%,
    2% 100%,
    50% 94%,
    76.6% 82.7%,
    94% 65.6%,
    100% 50%,
    94% 32.6%,
    76.6% 17.3%,
    50% 6%
  );
  shape-margin: 7%;
}

.quote-wrapper blockquote footer {
  width: 100%;
  position: absolute;
  bottom: 25px;
  font-size: 13px;
  text-align: center;
  font-style: italic;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

.quote-wrapper::before {/*引用符*/
  content: "\201C";
  font-size: 270px;
  height: 82px;
  line-height: 0.78;
  line-height: 1;
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 1;
  font-family: sans-serif, serif;
  color: #ccc;
  opacity: 0.9;
}

html

<div class="quote-wrapper">
  <blockquote class="text" cite="">
    <p>本文</p>
    <footer>– 引用元とか</footer>
  </blockquote>
</div>

can i use

現段階でのブラウザ対応状況です。今後の動きにご注意ください

via

HTML text inside a circle shape