有没有办法在有限的空间里把段落放在多行上？

Question

我有这个项目：

用户应该能够在框中添加评论，但该框的最大长度为 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>
   

矿山css

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

在这种情况下，我添加了 250 "1" 来查看结果。 这就是结果

问题是评论显示为...而不是整个评论。

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

编辑：实际解决方案

Css

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

HTML

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

Answer 1

实际上 CSS 没有标准的文本溢出方法：省略号； 在多行文本上，这个问题与你的非常相似： css ellipsis on second line