Placing text inside a fixed-width container using the CSS property "white-space: pre;"

Let me clarify if the title seems unclear.

I am developing a Q&A application using NodeJS, MongoDB, and Express.

Currently, I am working on the layout using CSS.

There is a small textarea where users can submit text. Upon clicking the submit button, they are redirected to a page displaying the entered data from the form.

However, the text in the main body exceeds the max-width I set for the div. This issue arose after adding the "white-space: pre;" property to allow line breaks in the post. Prior to that, the text stayed within the 960px width defined for the div but lacked line breaks.

Jade code snippet for this view:

extends layout

block content
    div.pageContainer
        h1 #{discussion.title}
        span(id="categoryMarker" style="font-size: 1.25em;") "#{discussion.category}"

        h3 #{discussion.author}
            |  -  
            span Created on #{discussion.date.toDateString()}
            br
            br
            div#bodyText
                p #{discussion.body}

    footer
        div.wrapper
          a.hvr-grow(href="/discussions") Back to all threads
          span.hvr-grow(style="color:white;")  –  
          a.hvr-grow(href="/discussions/create") Start a thread

CSS stylesheet (Related to the paragraph where the input from the textarea is displayed)

#bodyText
{
    font-size: 0.75em;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    max-width: 960px;
}

#bodyText p
{
    white-space: pre;
}

The overflowing text appears like this:

This should not happen. Any suggestions or tips would be greatly appreciated.

cssnode.jsexpressviewpug

Answer №1

Consider using white-space: pre-line over word-wrap: pre

Answer №2

I found the resolution to my issue by implementing:

#bodyText p
{
    white-space: pre-wrap;
}

Appreciation to all those who responded and offered assistance.

Answer №3

Are you familiar with the concept of word-wrapping?

#contentText p
{
    word-wrap: break-word;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

To replace basic SVG icons upon clicking with the use of HTML, CSS, and jQuery - here's how!

I have a simple question about inline SVG icons and how to handle them in HTML, CSS, and jQuery. Despite reading numerous resources, I still struggle with implementing the functionality where clicking on one icon changes it to another. My objective: To to ...

jqueryhtmlcsssvgicons

Exploring the Validation of POST Requests with JSON Content

When working with NodeJS and Express 4, I often come across situations where the client sends JSON data that needs to be processed: { "data" : "xx" "nested" : { field1: "111", field2: "222" } } However, on the server side, I ...

javascriptjsonnode.jsvalidationexpress

Expanding list item with jQuery

I am facing an issue with the dropdown functionality of my <li> elements. The problem occurs when clicking on the 4th option, as the expander appears on top instead of dropping down beneath the list item. If you check out this jsFiddle, you can see ...

jqueryhtmlcssgrid

Is there a way to redirect to a post endpoint?

Currently, I am dealing with Node.js and managing a user 'login' endpoint. The process involves querying a database to determine if the user can log in successfully. To enhance security, I want to use 'res.redirect' upon successful logi ...

node.jsexpressredirectpost

Struggling to set up a vertical grid using CSS in Bootstrap 3

Currently in the process of working on my final project as a student. Utilizing Bootstrap 3, I am striving to construct a grid that mirrors the structure depicted in the image below: Thus far, I have only achieved success in creating grids that span hori ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to add a darker tint to the background behind my overlay panel in jQuery

After grabbing the panel code from the jQuery Mobile website and integrating it into my file, I am interested in changing the appearance. I want to either darken or blur the background content when the panel is displayed. I attempted to use filter:blur(5px ...

jquerycssjquery-uijquery-mobile

Incorporate a double column to a Sequelize database using the Postgres dialect

I am in the process of establishing a relationship between the parents table and the children table, and this is my approach: // 20210226075430-create-child.js (children migration file) module.exports = { up: async (queryInterface, Sequelize) => { ...

mysqlnode.jspostgresqlexpresssequelize.js

Can a node package be published by duplicating someone else's work?

Looking to implement a node package into React Native. However, adjustments are needed for React Native bundling. Here's my proposed solution: 1. Clone the node package 2. Make necessary updates for React Native (dependencies, code updates) 3. Publ ...

node.jsreact-nativenpmpackagepublish

NodeJS server on Azure Website experiences a crash

We are facing a problem with our Azure Website hosted under the S1 plan, where a Node application connects to DocumentDB. Every time we try to upload media files into DocumentDB, the node.exe process crashes and restarts, regardless of the file size. Inter ...

node.jsazure-web-app-serviceazure-cosmosdbiisnodemulter

Error message: Unable to find child element in Selenium WebDriver

I'm currently dealing with a registration page where I encountered an issue. During my testing phase, I attempted to register without inputting a first name. Upon clicking the register button, I expected to see a 'Required' notification la ...

cssseleniumselenium-webdriverxpathdescendant

Using CSS to Create a Background with RGBA Color and Image

Having an issue with my CSS. I'm trying to create a scrolling background for the left section of my website. The RGBA is currently overlapping the entire page, but I only want it to overlap the background image. The same goes for the gridtile (the ov ...

htmlcss

Steps for adjusting the position of the tooltip arrowWould you like to

My current challenge involves repositioning the Tooltip arrow on my hover box to the left side, as it currently appears at the top of the box. This is the CSS I am using: <style type="text/css"> * { font-family: Arial; } .input { position: ...

htmlcss

Expanding Overlays on Mobile Devices

In mobile view, I am looking to make the overlay expand to cover all the content, which consists of 4 rows with 2 cells per row totaling 7 cells. The last row only has one cell. The code I have written works well on desktop view but my need is to have the ...

htmlcssmobilebootstrap-5compatibility

Reducing the Angular version from 11 to 9

{ "name": "project-learn-web", "version": "1.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", " ...

node.jsangularnode-modules

Can a Node.js script be executed without using the command line interface?

I currently rely on a nodejs script to compress PNG images, but I am looking to simplify its usage without the need for the command line interface. This way, designers can easily compress PNG images on their own. Is there a method to convert a nodejs scrip ...

node.jsnode-webkitelectron

Asynchronous function provides an array that is devoid of any elements

Currently, I am working on generating a matrix using some pairs of data. The function fetchDataPair() is designed as an async function. async function fetchData(info_array){ let matrix = [] for(const i of info_array){ let row = [] f ...

node.jspromise

What is the best way to update a state using the onChange event in React?

When working on a component for the frontend of my CRUD application using React, I created a form component for updating records in the database. Initially, I declared a state using useState without any initial values. const [data, setData] = useState({}) ...

reactjsexpressreact-hooksfetch-api

How can I compile .vue files without using webpack in the most efficient way possible?

Currently, I am developing a web application that makes use of vuejs for a portion of its interface. Interestingly, the back-end is not based on Node.js, which means there is no package.json file or any other tools from the common npm stack in this particu ...

node.jsvue.jsvuejs2

The attempt to add to http://localhost:3000 resulted in a 404 (Not Found) error. The promise was not caught, leading to an Error stating that the request

Currently, I am working on a project using the MERN stack. After successfully compiling the code by running npm start on both the client side and server side, I encountered an issue where the data is not being sent to MongoDB when filling out the form and ...

node.jsreactjsmongodbreact-routermern

There seems to be an issue with updating the MERN mongoDB collection as the response is not

I'm delving into the world of MERN development and currently working on creating an API for my React application. I'm closely following a tutorial to guide me through the process. Here's the code snippet that I've put together for testi ...

node.jsmongodbmongoosemern