Grid item outside container-CodePudding

I making app with comments and the problem is that when comment is long it goes out from the container and it does not look good. Is there way to wrap comment when it is to long and auto-push to next row and keep it in the "box"? I just want to overflowing part of comment push to the next row.

html:

<div class="comment-section-grid">
    <div class="comment-section">
        {% for comment in comments %}
            <div class="comment">
                <div><img class="comment-user-picture" src="{{user.profile.user_image.url}}"></div>
                <p class="comment-user">{{user.username}}</p>
                <p class="user-comment-content">{{comment.content}}</p>
            </div>                   
        {% endfor %}
    </div>
</div>

css:

.comment-section-grid{
    display: grid;
    grid-template-rows: 1fr 1fr ;
    grid-template-columns: 1fr 1fr;
}



.comment {
    margin: 2rem 0rem 2rem 0rem;
    display: grid;
    grid-template-columns: repeat(2, 6rem) ;
    grid-template-rows: 4.5rem;
    border: 2px;
    border-radius: 2rem;
    border-style: solid;
    border-color: rgb(168, 167, 167);;
}

.user-comment-content{
   grid-row: 2/3;
   grid-column: 2/3;
   margin-top: -1rem;
}

CodePudding user response：

One thing you could try is using the CSS property "word-break", doc found here: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

The property sets whether line breaks appear wherever the text will overflow its container.

I suggest maybe specifically trying "word-break: normal".

One other suggestion is using the CSS "white-space" property. Doc found here: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space This sets how white space inside an element is handled. For your solution you may need to use "white-space: normal".

Best of luck

CodePudding user response：

Try to use.

word-wrap:break-word;
word-break: break-all;

into theuser-comment-content.

.comment-section-grid{
    display: grid;
    grid-template-rows: 1fr 1fr ;
    grid-template-columns: 1fr 1fr;
}



.comment {
    margin: 2rem 0rem 2rem 0rem;
    display: grid;
    grid-template-columns: repeat(2, 6rem) ;
    grid-template-rows: 4.5rem;
    border: 2px;
    border-radius: 2rem;
    border-style: solid;
    border-color: rgb(168, 167, 167);;
}

.user-comment-content{
   grid-row: 2/3;
   grid-column: 2/3;
   margin-top: -1rem;
   word-wrap:break-word;
   word-break: break-all;
}