I am currently developing a book blogging platform that allows users to submit book reviews through a form with a textarea field.
To ensure that the user-entered paragraph breaks are displayed properly on the post's show page, I included a pre-wrap class to the paragraph element that will showcase the review text.
However, upon adding the pre-wrap class, an unexpected deep indent was introduced at the beginning of the first paragraph on the show page. This indent does not appear in the textarea field before form submission. I am seeking a solution to eliminate this large indent while maintaining the display of user-entered paragraph breaks.
Below is the CSS styling for pre-wrap:
.preWrap {
white-space: pre-wrap;
}
Here is the 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 structure of the show page (as an li element to accommodate the use of Bootstrap cards for displaying each post):
<li class="list-group-item ">
<p class="card-text preWrap">
<%= book.review %>
</p>
</li>
Below is how the show page renders the text:
https://i.sstatic.net/bx9PF.jpg
I have attempted to add text-indent: 0 to the CSS style sheet, but the indent persists. The indent is not present in the review stored in the database and only emerged after applying the pre-wrap style. I am puzzled by this indent and seek guidance on how to eliminate it.
Thank you.