Javascript 以角度将文本环绕成一个圆圈，并限制字符串长度

我对angular很陌生，我正在尝试将输入字段中的文本换行到圆形div中，这样文本就不会超出边框。任何帮助都将非常感谢这里是我的代码-谢谢

HTML:

更新-我已经更改了HTML/CSS，并使文本能够很好地环绕圆圈，但是如果单词太长，它会移出圆圈。有没有办法限制div中单词的长度

请参阅此小提琴的示例：

---

这与角度本身无关，可以通过css完成：

.textcircle{
        width:200px;
        height: 200px;
        border-radius: 1000px;
        border: 1px solid #888080;
        box-shadow: 1px 1px 1px 1px;
        text-align: center;
        font-size: 18px;
        font-family: Museo-Sans;
        font-weight: 300;
        overflow: hidden;
    }

我刚刚在css类中添加了“overflow:hidden”。

---

这不是一个很有角度的问题（因为这一部分似乎工作得很好），更多关于CSS

试试这个：

#text {
    display: block;
    padding: 0 30px
}

用CSS在圆形区域填充文本肯定是一门不精确的科学。

这应该行得通！ 基本上需要将

更改为

，以便进行文本包装。为

#文本

创建了一个内环以进行换行

---

祝你好运

不知道为什么，但你所有的文字都在一行上。只有一行，你知道吗？但是溢出隐藏并不显示超出圆圈的内容。。。。。触摸圆的边界时，文本应向下移动..：DOh是的，这种“碰撞检测”将非常困难。我认为你可以使用“hack”来让它工作，但是你需要使用一种字体，所有字符使用相同的空间，并且有一个预定义宽度/高度的圆圈。只有这样，您才能计算圆内的“线”数以及每个线中的最大字母数，为每个线创建一个角度变量，然后在用户输入时将主字符串打断为这些线。。。

.textcircle{
        width:200px;
        height: 200px;
        border-radius: 1000px;
        border: 1px solid #888080;
        box-shadow: 1px 1px 1px 1px;
        text-align: center;
        font-size: 18px;
        font-family: Museo-Sans;
        font-weight: 300;
        overflow: hidden;
    }

#text {
    display: block;
    padding: 0 30px
}