用CSS或CSS和Javascript创建一个圆圈

Question

小提琴

我愿意用文字创建一个圆圈。因此，我在一个div中有一个锚标签列表。我使用基本属性创建了一个圆，但是锚标记不停留在其中，并且倾向于获取父div的整个宽度。

我可以做的是使用:溢出:隐藏，以隐藏溢出的部分，对圆，但我宁愿是调整正确的锚标签在圆圈内，而不切割它的任何部分。

请建议是否有人曾使用过javascript或不使用javascript。这是小提琴。

HTML:

<div class="tag-cloud">
    <div class="tt">
        <a href="http://localhost/ameno/tag/8bit/" class="tag-link-66" title="1 topic" style="font-size: 8pt;">8BIT</a>
        .................................................
        <a href="http://localhost/ameno/tag/wordpress-tv/" class="tag-link-174" title="2 topics" style="font-size: 10.709677419355pt;">wordpress.tv</a> </div>
</div>

CSS:

.tag-cloud {
    width: 300px;
    height: 300px;
}

.tt {
    position: relative;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    background: #000;   
}

.tag-cloud a {
    color: red;
    display: inline-block;
}

我试过的是：

http://www.csstextwrap.com/

但这只适用于有限数量的文本。如果我再加一些文字，那就不太好了。

预期结果：

​

​

Answer 1

我猜从你的描述来看，你的意思是这样的：http://codepen.io/skeate/pen/YPyqWd

如本文所述：https://skeate.github.io/2015/07/13/Wrapping-Text-to-Fit-Shaped-Containers-with-CSS.html

它使用的是：

shape-outside: polygon();

风格来实现它。它的完整css是：

@mixin circle($radius){
  width: $radius*2;
  height: $radius*2;
  border-radius: $radius;
  &::before{
    content: '';
    height: 100%;
    width: 50%;
    float: left;
    shape-outside: polygon(
      0 0,
      100% 0,
      60% 4%,
      40% 10%,
      20% 20%,
      10% 28.2%,
      5% 34.4%,
      0 50%,
      5% 65.6%,
      10% 71.8%,
      20% 80%,
      40% 90%,
      60% 96%,
      100% 100%,
      0% 100%
    );
  }
  > span::before{
    content: '';
    height: 100%;
    width: 50%;
    float: right;
    shape-outside: polygon(
      100% 0,
      0 0,
      40% 4%,
      60% 10%,
      80% 20%,
      90% 28.2%,
      95% 34.4%,
      100% 50%,
      95% 65.6%,
      90% 71.8%,
      80% 80%,
      60% 90%,
      40% 96%,
      0 100%,
      100% 100%
    );
  }
}

.circle{
  background: #accede;
  text-align: center;
  @include circle(5rem);
}

或者你想要像GillesC上面的评论中那样的循环的文本。