Pre-wrap styling added a large indent to first paragraph

Question

I am making a book blogging app where a user can fill out a form that includes a textarea field for the book review.

I added a pre-wrap class to the paragraph element meant to display the review text so that the paragraph breaks the user entered into the form would display on the post's show page.

However, when I added pre-wrap, an extremely deep indent was also inserted at the beginning of the first paragraph of text on the show page. There is no indent being added into the textarea field before submitting the form. I would like to remove this large indent while still displaying user entered paragraph breaks.

Here is my css pre-wrap styling:

.preWrap {
    white-space: pre-wrap;
}

Here is my textarea form field:

<label for="review" class="form-label">Review</label>
    <br>
    <textarea class="form-control" name="book[review]" rows="7"   placeholder="Enter your review here" required></textarea>

Here is the show page (it is an li because I am using bootstrap cards to display each post):

<li class="list-group-item ">
    <p class="card-text preWrap">
        <%= book.review %>
    </p>                   
</li>

Here is how the show page displays the text:

I have already tried adding text-indent: 0 to the CSS style sheet. The review saved in the DB does not show this indent. It did not appear prior to adding the pre-wrap style. Why is this indent appearing and how can I remove it?

Thank you.

Answer 1

Your problem is the whitespace in your HTML which is betweeen the > of the <p class="card-text preWrap"> and the start of the rendered book-review (<%= bo...).

The whitespace and blue-line in the HTML corresponds to the whitespace and blue-line in the rendered page:

This is because white-space: pre-wrap makes all whitespace in HTML visible in the browser's viewport on a 1:1 basis, whereas normally whitespace in HTML is collapsed.

You have a couple of options:

1. Change your CSS to use white-space: pre-line which preserves raw HTML line-breaks (e.g. \r\n) but will collapse other whitespace.
2. Remove white-space: pre-wrap entirely, and instead do something like this: <%= htmlEncode( book.review ).replace( "\r\n", "<br />" ) %>.
   • And you are HTML-encoding book.review, right? Otherwise any user could embed a <script> element that steals cookies and performs XSS attacks.

Like so:

Using pre-line:

li {
    outline: 1px solid red;
}

p {
    outline: 1px solid blue;
}

li > p.card-text {
    white-space: pre-line;
}

<li class="list-group-item">
    <p class="card-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu lorem non lorem dapibus euismod et vel felis. Suspendisse ipsum nulla, pellentesque pretium facilisis eget, posuere quis est.
        
        Nam condimentum tincidunt mauris, eu hendrerit massa auctor vel. Cras ut turpis vitae nulla vehicula pulvinar at quis augue. Sed ante magna, ullamcorper ut tempor non, ultricies non diam.
        
        Cras tristique erat ante, ut pretium dolor tincidunt id. Donec quis ornare est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </p>                   
</li>

Using <br />:

While the HTML above has two line-breaks between each run of text, the HTML below only has one <br /> between each run - you might want to add another <br /> or adjust CSS's line-height for desirable aesthetics.

li {
    outline: 1px solid red;
}

p {
    outline: 1px solid blue;
}

<li class="list-group-item">
    <p class="card-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu lorem non lorem dapibus euismod et vel felis. Suspendisse ipsum nulla, pellentesque pretium facilisis eget, posuere quis est.<br />Nam condimentum tincidunt mauris, eu hendrerit massa auctor vel. Cras ut turpis vitae nulla vehicula pulvinar at quis augue. Sed ante magna, ullamcorper ut tempor non, ultricies non diam.<br />Cras tristique erat ante, ut pretium dolor tincidunt id. Donec quis ornare est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </p>                   
</li>