title: How to make text stay inside a div box and continue on next line when it reaches the edge of div box?
body: <p>So I'm making this flash card app, and I'm using Angular to let the user enter text in an input text box and the text displays on a flash card below it. The problem is that when the user types a lot, the text overflows moves past and outside the div box. Here is my code.</p>
  
  <pre><code>&lt;input type="text" ng-model="ctrl.note"&gt;
  
          &lt;div class="box"&gt;
              &lt;div class="note"&gt;{{ctrl.note}}&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>