Is there a way to put the paragraph on multiple lines in limited space?

Question

i have this project:

User should be able to add a comment in a box but the box is have max lenght of 250 characters.

This is my snippet from 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>

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

In this case i added like 250 "1" to see the result. And this is the result

The problem is that the comment is displayed with ... and not entire comment.

Is there a way to put the comment on multiple lines in limited space?

EDIT: ACTUAL SOLUTION

Css

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

HTML

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

score 0 · Answer 1 · answered Apr 01 '21 at 13:30

0

well actually CSS has no standard method for doing text-overflow: ellipsis; on multiline texts this question was quite similar to yours: css ellipsis on second line

answered Apr 01 '21 at 13:30

Farid Ghaderi

99
1
8

I think about a Textarea readonly.. it isnt really good to see but better than other – MrBuffalo Apr 01 '21 at 13:35
Otherwise how is it possible? Javascript? or something else? – MrBuffalo Apr 01 '21 at 13:38
well since we can`t handle this ellipsis problem with CSS standard methods it`s actually a great solution – Farid Ghaderi Apr 01 '21 at 13:39
you can handle it with JS, but that textarea solution that you just said is quite enough and it can do what you want – Farid Ghaderi Apr 01 '21 at 13:41

Is there a way to put the paragraph on multiple lines in limited space?

1 Answers1