在wordwrap曲线中动态对齐html列表？

Question

我正在尝试将HTML列表包装成曲线。我想避免指定每个列表元素的位置，以便在添加项目时自动计算它的位置。

我附上了我想要完成的事情的图像。 谢谢！

Answer 1

您可以将shape-outside与float和否定margin结合使用。

使用border-radius: 50%创建一个圆形元素，让它float: left并设置shape-outside: circle()。这样，文本将浮动在圆形外部。现在你可以设置一个负的右边距，即margin-right: -6em;来拉动圆形元素中的浮动文本。

这是一个有效的例子：

＆＃13;

＆＃13;

.curve {
  width: 200px;
  height: 200px;
  background: purple;
  float: left;
  margin-right: -6em;
  border-radius: 50%;
  shape-outside: circle();
}

ul {
  padding: 2.5em 0;
  list-style: none;
  color: white;
}

＆＃13;

<div class="curve"></div>
<ul>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
</ul>

＆＃13;

＆＃13;

＆＃13;