Question

我对角度很新，我试图从输入字段中获取文本以包裹在圆形div中，以便文本不会超出边界。任何帮助将非常感谢这里是我的代码 - 谢谢！

HTML：

<div ng-app>
    Add Information <textarea ng-model ="input" maxlength = "120" class = "textinput" </textarea>     

     <div class="textcircle">
        <span id="text">{{input}}</span>
     </div>
</div>

CSS：

    .textinput{
    height: 15%;
    width: 40%;
    margin-left: 5px;
}
.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;
}
#text{
    padding: 1em;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    display: block;
}

更新 - 我更改了HTML / CSS并让文字很好地包裹在圆圈周围，但是如果单词太长则会移动到圆圈之外。有没有办法限制div内单词的长度？

查看这个小提琴的例子：

http://jsfiddle.net/Gj7tL/16/

Answer 1

这应该有效！ http://jsfiddle.net/D2TL3/ 基本上需要将<span>更改为<div>以进行文本换行。为#text创建了一个内圈以包裹。

祝你好运！

Answer 2

这与角度本身无关，可以通过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”。 http://jsfiddle.net/gztR6/

Answer 3

不是一个有角度的问题（因为那部分似乎工作正常），更多关于CSS。

试试这个：

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

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

将文本换成圆角并限制字符串长度

3 个答案: