Html 有没有一种方法可以在有限的空间内将段落放在多行上？

我有这个项目：

用户应该能够在框中添加注释，但框的最大长度为250个字符

这是我的Html代码片段：

<div class="comment-box">
    
    <div class="list-comments">
        <span> Comments </span>
        <hr>
        {%for i in comments.all%}
            <div class="comment">
                <p class="description">
                    {{i.description}} 
                </p>
                <p>
                    <i><b>{{i.user}}</b>, {{i.date}}</i>
                </p>
            </div>
        {%empty%}
            <p> There aren't comment here! </p>
        {%endfor%} 
    </div>
    
    <div class="leave-comment">
        <form action="{% url 'add_comment' item.id %}" method="POST">
            {% csrf_token %}
            {{comment_form}}
            <input type="submit" value="Send comment" class="button">
        </form>
    </div>
   

在本例中，我添加了250个“1”来查看结果。 这就是结果

问题是评论显示时带有。。。而不是全部的评论

有没有办法将评论放在有限空间的多行上？

编辑：实际解决方案

Css

HTML

{{i.description}}

{{i.user}，{{i.date}

实际上CSS没有标准的文本溢出方法：省略号；论多行文本 这个问题和你的很相似：

---

我认为文本区是只读的。。看东西不是很好，但比其他东西好，否则怎么可能呢？Javascript？或者别的什么？既然我们不能用CSS标准方法处理省略号问题，它实际上是一个很好的解决方案。你可以用JS处理它，但是你刚才说的textarea解决方案已经足够了，它可以做你想做的事情

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

textarea{
    width:430px;
    height: 130px;
    resize: none;
}

<textarea readonly>
     {{i.description}} 
</textarea>
<p>
   <i><b>{{i.user}}</b>, {{i.date}}</i>
</p>