Stop line breaks in textarea

Question

Stop line breaks in textarea

Can you help me with a problem I'm facing? I have a sentence stored in a textarea in my Postgresql DB and I need to display it on another page. However, if the user's input includes line breaks, like this:

Hello

everybody

The string in my database will contain "\n", but when I try to render it, the line breaks are still visible, making the sentences look like this:

Hello \n everybody

I've tried using CSS properties such as white-space: pre-line; and white-space: pre-wrap;, but they didn't work. I also attempted to replace "\n" with "
" in my Python backend code using:

message.replace("\n","<br/>")

But that didn't solve the issue either. Do you have any suggestions or ideas on how to fix this problem?

Thank you for your assistance.

html css flask textarea

Answer 1

Answer №1

To preserve line breaks properly in your message, you can use <code>message.replace("\n", "<br/>")

function. Make sure to include the |safe filter within the template:

This will prevent <br> from being displayed as plain text.

Another option is to utilize the following code snippet:

{{ msg|replace('\n','<br>')|safe }}

Answer 2

To preserve line breaks properly in your message, you can use <code>message.replace("\n", "<br/>")

function. Make sure to include the |safe filter within the template:

This will prevent <br> from being displayed as plain text.

Another option is to utilize the following code snippet:

{{ msg|replace('\n','<br>')|safe }}

Stop line breaks in textarea

Answer №1

Similar questions

One problem with placing Bootstrap columns inside another column

Linked selection options for state, city, and postal code

Is it possible to style a nested ID with CSS?

Monitoring changes to a SCSS file

Step by step guide for adding a hyperlink to a <div> element in iOS

How can you make the coordinates of the cursor track the cursor when it hovers over a rectangle?

Adjusting the size of h1 when hovering over an image

JavaScript for validating dimension text input has unique functionalities

Issues with CSS rendering font in a suboptimal way

What is the best way to expand my container element and add margins to the top and bottom?

An error message stating 'instructions.addEventListener is not a function' appears when using PointerLockControls in three.js

Select the top row of a table when the checkbox is ticked to emphasize it

Ensuring consistent placement and scrollability of two divs across all screen sizes

What is the best way to transform an HTML table into the Bootstrap grid system without losing any spacing?

Is it considered good practice to utilize Vue.js for managing global shared state and implementing for loops outside of components?

The dynamic addition of the active class is malfunctioning

Using v-model with an input file is not supported

applying a blur effect to the Vue modal mask

Ways to modify the standard font size for displayed markdown text

Retrieve the input value without a specified ID in HTML