用角度缠绕文本并限制字符串长度

我对角度相当陌生，我试图从输入字段获取文本以包装在圆形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/

来源

2014-01-30 epg388

不知道为什么，但所有的文本都在一行。只有一行，你知道吗？ – Cam

这有没有关系角度本身，它可以通过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类。 http://jsfiddle.net/gztR6/

来源

2014-01-30 19:38:12 Fedaykin

但溢出隐藏不显示的内容超出了圆圈.....文本应该下降时，触摸边界的圆圈..：D –

哦，是的，这种“碰撞检测”将是非常困难的。我认为你可以使用“hack”来使它工作，但是对于它你需要使用一种字体，其中所有的字符使用相同的空间量，并且具有预定义宽度/高度的圆。只有这样你才能计算圆圈内的“线条”数量以及每个字符的最大字母数量，为每个字符创建一个角度变量，然后在用户输入时将主字符串拆分为这些行。。 – Fedaykin

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

试试这个：

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

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

来源

2014-01-30 19:38:28 Will

这应该工作！ http://jsfiddle.net/D2TL3/ 基本上需要将<span>更改为<div>用于文本包装目的。创建一个内部圈子为#text包装。

祝你好运！

来源

2014-01-30 19:59:24 Yuval

用角度缠绕文本并限制字符串长度

回答

相关问题