如何在CSS中创建一个充满可变大小文本的完美圆形圆圈

Question

我有一个react.js应用程序，需要动态地使可变大小的文本看起来像完美地围成一个圆圈（附加图片）。

我尝试通过在文本的每一侧上创建小div使其看起来像一个圆，但这种效果还不够好，而且太复杂，无法实现不同大小的文本

Answer 1

不是您要找的答案，而是有关形状外的一些提示： 它需要知道您的文本的长度，并将您的方框大小调整为正方形。

图像或渐变可用于将文本从绘制区域推入。

示例：

div:not([class]) {
  width: 24em;
  min-height: 24em;
  /* see me
  border:solid;
  border-radius:100%;  
  */
}

p {
  margin: 0;
  text-align: justify;
}

div[class]:before {
  opacity: 0;
  width: 12em;
  height: 12em;
  content: '';
  float: left;
  clear: left;
  background: radial-gradient(circle at bottom right, transparent 70%, black 70%);
  shape-outside: radial-gradient(circle at bottom right, transparent 70%, black 70%);
  float: left;
}

div[class][id]:before {
  background: radial-gradient(circle at top right, transparent 70%, black 70%);
  shape-outside: radial-gradient(circle at top right, transparent 70%, black 70%);
  float: left;
}

div[class]:after,
div[class][id]:after {
  opacity: 0;
  content: '';
  width: 12em;
  height: 12em;
  float: right;
  background: radial-gradient(circle at bottom left, transparent 70%, black 70%);
  shape-outside: radial-gradient(circle at bottom left, transparent 70%, black 70%);
}

div[class][id]:after {
  content: '';
  float: right;
  background: radial-gradient(circle at top left, transparent 70%, black 70%);
  shape-outside: radial-gradient(circle at top left, transparent 70%, black 70%);
}


/* extra */

body {
  font-family: 'Times New Roman';
  font-size: 16px;
  line-height: 1.28em;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-flow: dense;
  max-width: 600px;
  margin: auto;
}

div {
  margin: auto;
}

body> :nth-child(1) {
  grid-row: 1 / span 2;
  grid-column: 2 / span 2;
  color: tomato
}

body> :nth-child(2) {
  grid-row: 3 / span 2;
  grid-column: 3 / span 2;
  color: green
}

body> :nth-child(3) {
  grid-row: 2 / span 2;
  grid-column: 5 / span 2;
  color: blue
}

<div>
  <div class="shape"></div>
  <div class="shape" id></div>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
</div>
<div>
  <div class="shape"></div>
  <div class="shape" id></div>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
</div>
<div>
  <div class="shape"></div>
  <div class="shape" id></div>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
</div>

  

https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside CSS属性shape-outside定义了一个形状（它可以是非矩形的），相邻的内联内容应该围绕该形状进行包装。默认情况下，内联内容环绕其边距框； shape-outside提供了一种自定义这种换行的方法，从而可以将文本换成复杂对象而不是简单框。

浏览器支持shape-outside