用角度纏繞文本並限制字符串長度

我對角度相當陌生，我試圖從輸入字段獲取文本以包裝在圓形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

用角度纏繞文本並限制字符串長度

回答

相關問題