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

Calculating the number of filtered records in PHP/MYSQL

In my PHP/MYSQL based application, a search feature allows users to find available properties or hotels based on their chosen dates. Other filters such as location and amenities are also available. Recently, a customer requested that the number of records ...

phpmysqlsqlmagento

Achieving overlapping div layouts with CSS styling

Displayed above are 4 different divs: red, green, and blue. I am seeking to have the blue div positioned directly below the green div, which contains the text "JACKSON". Additionally, I do not want the green div to expand beyond its content, nor do I want ...

htmlcss

The jQuery DataTable with footer is lacking responsiveness

Why is my table not responsive when I add a tfoot? I tried using the example found at https://datatables.net/examples/api/multi_filter.html Interestingly, when the footer contains only text, the table is responsive. However, if there's an input fie ...

jqueryhtmltwitter-bootstrapcssdatatables

How can I optimize the performance of this SQL query in MS Access?

Displaying Tables: Daily Sales Quantity Data Weekly Stock Quantity Data I have ensured that both tables are displayed, even if the stock data is empty, by using a left join. SELECT dbo_EPOS_Daily_split.EndDay, dbo_EPOS_Daily_split.Item_Code, dbo_EPOS_ ...

sqlms-accessleft-joinquery-optimization

Which file is the optimal placement for the Bootstrap directory: 'header.php' or 'function.php'?

Having dabbled in WordPress Theme templates for a while, I've decided to try my hand at creating a theme from scratch. After uploading the Bootstrap features onto my server, I'm pondering whether it's better to call the Bootstrap.css files ...

phphtmlcsswordpresstwitter-bootstrap

Is it possible to populate a table directly using a ResultSet?

I have a large number of database tables that require data modification using Java. Due to factors beyond my control, I will query each table, retrieve a set of data, and transfer that data to a different table. What is the most efficient way to accompli ...

javamysqlsqldatabasejdbc

Get the latest date from one table and use it as a condition in the where statement of another

I am tackling a business challenge that involves managing two tables: one weekly sales table updated based on invoicing and a daily sales table. My goal is to select transactions from the daily sales table since the last update of the weekly sales table. ...

sqloracle

Using jQuery to reset the position of animated divs

I am currently working on a code that expands and centers a div when hovered upon using the following script: $(document).ready(function(){ //animation on hover $('#sliding_grid li').hover(function() { ...

javascriptjquerycss

Tips for setting discrete mapper style in cytoscapejs?

Currently, I am defining the style of cytoscape.js through CSS and converting it to JSON format using this resource. My goal is to implement a discrete mapper for styling. It's similar to the scenario discussed in How to use a descreteMapper like on c ...

cssjsoncytoscape.js

Retrieving a specific item from a sql-array using jOOQ

How do I retrieve an item from an array in JOOQ similar to this SQL query? SELECT (ARRAY_AGG(id))[1] FROM entities; Is there a way to achieve this using JOOQ? dsl().select(arrayAgg(ENTITIES.ID).get(1)).from(ENTITIES).fetch(); Alternatively, can I acces ...

javasqlarraysjooq

Change the color of the text in a shiny dashboard

While exploring shiny dashboard, I came across this link that explains how to modify colors in the sidebar and header. However, I'm struggling to change the font color for sidebar items. The default white font color becomes unreadable when using light ...

htmlcssrshinyshinydashboard

Encountering an issue while attempting to replicate the Spotify app on localhost:3000. The error message "TYPEERROR: Cannot read property 'url' of undefined" is hind

As a first-time user of stackoverflow, I am unfamiliar with its rules and regulations, so I apologize in advance for any mistakes I may make. Currently, I am attempting to create a Spotify clone using React. Everything was going smoothly until I completed ...

javascriptcssreactjs

Expanding Anchors to Fit Content with FontAwesome Icons

I am attempting to include two clickable icons on the right side of a list item, but the anchors containing the icons seem to be expanding too wide without any padding or margins, causing their clickable zones to overlap. Could this be an issue with the f ...

htmlcssfont-awesomebootstrap-4

A minimalist web page appearing as blank in Internet Explorer

After testing my simple web page in various browsers, I discovered that it only showed a blank white page in Internet Explorer. I combed through my CSS code and identified background = rgba(some stuff) as the unsupported line by IE. However, this particula ...

htmlcssinternet-explorer

Contrast between pre-tag in HTML and white-space: pre newline exclusion

I originally thought that the pre(html tag) would act just like 'white-space:pre'. However, it turns out that it does not behave in the same way. <pre> aaa bbb </pre> <p style="white-space:pre;"> aaa bbb </p> The <pr ...

htmlcss

Making a div equal in height to an image

What I currently have is like this... https://i.stack.imgur.com/7FeSi.png However, this is what I am aiming for. https://i.stack.imgur.com/fn9m0.png The image dimensions are set up as follows... #content img{ padding: 3%; width: 60%; height: 50%; floa ...

htmlcssimage

Retrieve MySQL data using PHP with a specific date range grouping

I am working with a table in MySQL: Query: How can I group each row based on a 1-hour interval within a specific range? Desired output: range1 = 2014-01-28 00:00:00 to 2014-01-28 01:00:00 range2 = 2014-01-28 01:00:00 to 2014-01-28 02:00:00 range3 = 2014 ...

phpmysqlsqldate-range

Guide to positioning a div at the bottom of a Drawer while maintaining the same width as the Drawer in React Material UI

Creating a Drawer on the right-hand side using <Drawer/>, I am trying to make a <div> stick to the bottom of the <Drawer />. The width of this <div> should match the width of the <Drawer />. Desired Outcome: To achieve the d ...

htmlcssreactjsmaterial-ui

Best practice for updating multiple records with unique IDs in Django

Imagine you have a table with columns labeled as acct, ip, and status (with acct being unique). Let's say there are around 1000 rows that require updates to a specific ip and status (such as 11.11.11.11 and 'great'). Using the update method ...

pythonsqldjango

Create containers on the right side using HTML

Struggling to align the small boxes on the right side while keeping the left boxes from blending under them? I've attempted various solutions, but each time it seems like the code breaks. By the way, I utilized a generator to create the grid. Here is ...

htmlcss