Wrap text in a circle with angular and limit the string length

I'm quite new to angular and I'm trying to get the text from the input field to wrap in the circular div so that the text does not go outside the border. Any help would be greatly appreciated here is my code - thanks!

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;
}

UPDATE - I have changed the HTML/CSS and gotten the text to wrap well around the circle, but if a word is too long it moves outside the circle. Is there a way to limit the length of a word inside the div?

See an example with this fiddle:

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

Answers


This should work! http://jsfiddle.net/D2TL3/ Basically needed to change <span> to a <div> for text wrapping purposes. Created an inner circle for #text to wrap with.

Good Luck!


this has nothing to do with angular itself, it can be done by 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;
    }

I´ve just added the "overflow: hidden" in your css class. http://jsfiddle.net/gztR6/


Not really an angular question (as that part seems to be working fine), more about CSS.

try this:

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

Filling text in a circular area with CSS is definitely an inexact science.


Need Your Help

Shell sorting random float array not working

c shell sorting segmentation-fault

I wrote a shell sorting algorithm which works perfectly on integer values, but gives me segmentation fault when trying to sort float numbers. Could you help me with this ? Thank you.