Currently, I am working on a flash card application using Angular. Users can input text in a text box, and the text will be displayed on a flash card below it. However, I have encountered an issue where if the user types a lot of text, it overflows and moves past the boundaries of the div box. Below is the snippet of my code:
<input type="text" ng-model="ctrl.note">
<div class="box">
<div class="note">{{ctrl.note}}</div>
</div>
</div>
CSS:
.box {
border: solid;
height: 300px;
width: 600px;
margin: 30px auto;
border-radius: 25px;
box-shadow: 8px 8px 10px #ccc;
}
.note {
text-align: center;
margin: 50px;
font-weight: bold;
font-size: 40px;
}