title: Is there a way to put the paragraph on multiple lines in limited space?
body: <p>i have this project:</p>
  <p>User should be able to add a comment in a box but the box is have max lenght of 250 characters.</p>
  <p>This is my snippet from Html:</p>
  <pre><code>&lt;div class=&quot;comment-box&quot;&gt;
      
      &lt;div class=&quot;list-comments&quot;&gt;
          &lt;span&gt; Comments &lt;/span&gt;
          &lt;hr&gt;
          {%for i in comments.all%}
              &lt;div class=&quot;comment&quot;&gt;
                  &lt;p class=&quot;description&quot;&gt;
                      {{i.description}} 
                  &lt;/p&gt;
                  &lt;p&gt;
                      &lt;i&gt;&lt;b&gt;{{i.user}}&lt;/b&gt;, {{i.date}}&lt;/i&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
          {%empty%}
              &lt;p&gt; There aren't comment here! &lt;/p&gt;
          {%endfor%} 
      &lt;/div&gt;
      
      &lt;div class=&quot;leave-comment&quot;&gt;
          &lt;form action=&quot;{% url 'add_comment' item.id %}&quot; method=&quot;POST&quot;&gt;
              {% csrf_token %}
              {{comment_form}}
              &lt;input type=&quot;submit&quot; value=&quot;Send comment&quot; class=&quot;button&quot;&gt;
          &lt;/form&gt;
      &lt;/div&gt;
     
  </code></pre>
     
  <p>Mine css</p>
  <pre><code>.comment-box{
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  width: 60%;
  border: 1px groove rgb(133, 133, 219);
  border-radius: 5px;
  
  }
  
   .list-comments{
      padding: 5px;
      flex-basis: 60%;
      overflow-y: scroll;
      height: 450px;
      width: 450px;
  }
  
  .leave-comment{
      padding-top: 50px;
      font-size: 16px;
      margin-left: 10px;
      flex-basis: 30%;
      background-color: white;
      text-align: center;
  }
  
  .comment{
      border: 1px groove rgb(133, 133, 219);
      border-radius: 5px;
      padding: 10px;
      background-color: white;
  }
      
  .description{
      max-width: 320ch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  </code></pre>
  <p>In this case i added like 250 &quot;1&quot; to see the result.
  And this is the result</p>
  <p><a href="https://i.stack.imgur.com/ygzsp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ygzsp.jpg" alt="enter image description here" /></a></p>
  <p>The problem is that the comment is displayed with ... and not entire comment.</p>
  <p><strong>Is there a way to put the comment on multiple lines in limited space?</strong></p>
  <p>EDIT: ACTUAL SOLUTION</p>
  <p>Css</p>
  <pre><code>textarea{
      width:430px;
      height: 130px;
      resize: none;
  }
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;textarea readonly&gt;
       {{i.description}} 
  &lt;/textarea&gt;
  &lt;p&gt;
     &lt;i&gt;&lt;b&gt;{{i.user}}&lt;/b&gt;, {{i.date}}&lt;/i&gt;
  &lt;/p&gt;
  </code></pre>