Tips for retrieving formatted text layout from the database

I recently encountered an issue when adding text to my MySQL database using a textarea. The format of the text, including newlines and spaces, was saved in the database but not displayed as such when viewed directly. When I retrieve this string from the database and load it into a textarea again, the original format is preserved. However, when attempting to display this string in a div element, it appears as one continuous line.

My query is: How can I display formatted text correctly in a div element?

sqlcssdatabase

Answer №1

Specify that the <div> element should have the same white-space behavior as the <textarea> and <pre> elements.

div{
    white-space: pre;
}

Answer №3

Which programming language are you currently using to fetch data for your webpage? Is it PHP?

If so, you can use htmlentities($mystring) to convert line breaks into <br> tags.

Another option is to use:

<pre>
your text
</pre>

This will display the text in a format similar to plain source code.

Answer №4

There are two methods you can utilize to achieve this:

The first method involves utilizing the PHP function nl2br() to convert \n into < br > tags. The second method is to assign a class to your div and format it using CSS white-space

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

Tips for directing attention to a specific row with an input field in JavaScript

I duplicated a table and added an input field for users to search or focus on a specific row. However, there are two issues: When a user enters a row number, the table displays the wrong row - for example, if the user enters 15, the table shows row number ...

javascripthtmlcss

The issue with color swapping in Internet Explorer is not functioning correctly due to

I am facing an issue with a jQuery script that I have created to change the background colors of rows in a large table. Unfortunately, it seems to be malfunctioning on Internet Explorer versions 6 through 9. Below is the snippet of code I am using: <s ...

jquerycssinternet-explorer

Extracting JSON data from a column in Presto

In my Presto table, there is a specific structure that I am trying to achieve. Specific Date Specific Rates 1/1/2022 {"USD":"725.275","GBP":"29.275000000000002","CAD":"0.713352"} 1/2/202 ...

sqljsonpresto

Using Styled Components to Implement Background Images in a React Application

I'm currently attempting to pass a background image using a prop, but I'm encountering an issue where it's indicating that url is undefined. const CardImage = styled.div` height: auto; width: 100%; background-size: c ...

javascriptcssreactjsstyled-components

Consistency in table cell formatting

What is the best way to ensure all my table cells have a consistent height and width, regardless of their content? I am working on a crossword puzzle game where some cells are empty, some contain letters as the user fills in words, and others display butt ...

css

Having trouble getting your React project to work because NPM start won't cooperate? Here are some troubleshooting tips

Hello, I recently downloaded a React project from https://github.com/fabiau/jc-calendar. However, when I try to run npm start, I encounter error messages. I have attempted to use "NPM Fund" and "NPM Update", but unfortunately, neither of them resolved the ...

htmlcssreactjsnpm

Shift the checkbox label over to the left with just CSS

I am faced with the following code snippet: <div> <span> <input type="checkbox"> <label>I desire this to appear on the left-hand side</label> </span> </div> My goal is to shift the label to the left side of ...

htmlcsscheckboxlabel

Adjust the margin of FormHelperText within a FormControl specifically for a Select component in Material-UI

I'm currently facing a challenge where I need to add marginLeft of 8px to FormHelperText. However, I have not been successful in doing so within the MuiInput formControl rule or in MuiSelect. Here is the React code snippet: <FormControl error clas ...

cssreactjsformsmaterial-uijss

Curved divs display outlines on more compact dimensions

Check out this relevant Codesandbox There seems to be a recurring issue in my application where rounded divs display edges when they are of smaller sizes. Refer to the image below for a visual representation. What could be causing this problem and how can ...

htmlcss

Enhance your webpage's body by zooming in using jQuery on Mozilla Firefox

I have a webpage and I would like to zoom its body when it loads using jQuery. However, the CSS zoom feature is not working in Mozilla Firefox. This is what I currently am using: $("body").css("zoom", "1.05"); It worked in Chrome, Opera, and Edge, but un ...

javascriptjqueryhtmlcss

Is it possible to align divs so that they touch when they wrap to a new line, creating a grid-like appearance?

My React board component consists of an array of divs that I want to arrange in a grid-like map. The issue is, when the div wraps to a new line, there is significant space between each row. I aim to have the divs close together with no gaps. GameMap state ...

javascriptcssreactjsflexbox

I encountered a SyntaxError indicating a missing ")" right before utilizing jQuery in my code

When trying to run the code below, I encountered an error in the console stating SyntaxError: missing ) after argument list. $(document).ready(function() { $(".blog-sidebar-form form").before("<p class="blog-sidebar-inform>Dummy Text</ ...

jqueryhtmlcss

Enclose an image with a <div> element while maintaining the <div> height at

Encountering a challenge where positioning an element on top of an image at specific coordinates (20% from the top and 30% from the left) is required. Initially, the solution involved wrapping the image in a div with a relative position and using absolute ...

javascriptjqueryhtmlcss

Ways to superimpose an image

Struggling to overlay an image over two div columns - I attempted using Z-index and experimented with various positioning properties. What am I missing? The triangle situated behind the two boxes, along with the additional text on JSFiddle, should appear ...

csshtmlz-index

CSS causing navigation bar drop down content to be hidden when hovering

I'm currently working on a drop-down menu and everything seems to be functioning properly. However, when I hide my drop-down block, it doesn't reappear on hover. Can someone help me identify the issue here? HTML-: <div id="nav_wrapper"> ...

htmlcss

Is there a way to position the text to the right and the image to the left?

I have written the following code: <!DOCTYPE html> <html> <head> <title>UMass Boston Computer Science Club About page</title> <link href='https://fonts.googleapis.com/css?family=Chakra Petch' rel='sty ...

htmlcss

How can I dynamically pass a background:url using JavaScript to CSS?

I have a CSS code snippet below that I would like to dynamically change the "background:url" part using Javascript. div{ background: url('pinkFlower.jpg') no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; ...

javascriptjqueryhtmlcss

What is the best way to display content next to an image, as well as below the image once it finishes?

Currently, I am working on customizing my blog posts in WordPress. My goal is to have the content of each post displayed next to the post thumbnail, and once the image ends, the content should seamlessly flow underneath it from the left side. I have imple ...

htmlcsswordpressbootstrap-4text-alignment

Aligning three hyperlinks evenly to spread across the webpage

My professor provided the class with an image that may resemble something he could ask us to recreate on an upcoming exam. He suggested we try replicating it at home to study. I have most of it figured out, but there are three links positioned perfectly ac ...

htmlcss

Is it possible to convert an image into text using CSS just for the purpose of printing

Imagine having a prominent banner at the top of a webpage that you want to print. Instead of depleting someone's ink by printing the entire banner image, is it possible to utilize CSS to substitute the image with text in H1 size? ...

cssimagetextheaderprinting