Text will not be moved to a new line

Hello, I am encountering an issue with my messaging system where the messages retrieved from the database are not properly going to a new line in the window. Despite adjusting the width, the messages continue to overlap. Below is the code snippet:

This code is within a while loop fetching results from the database and displaying them using AJAX.

<p id='message' > " . $row["message"]. "</p>

The following code is displayed using AJAX:

<div id = "load_results" ></div

Here is the corresponding CSS:

#message {
          background-color: blue;
          width: 200px;
          margin-right: 50px;
}
#load_results {
          height: 400px;
          overflow-y: auto;
          width: 250px;
          padding-left: 10px;
}

An overflow on the y-axis is required due to multiple scrollable elements lined up on the page, dictating a specific set of dimensions for both height and width.

Answer №1

Dealing with a similar problem, I found success by utilizing white-space: pre-wrap; rather than white-space: wrap;.

Answer №2

Did you attempt to directly specify the text to wrap?

 #message {
   background-color: blue;
   width: 200px;
   margin-right: 50px;
   white-space: wrap
 }

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

I am currently attempting to find a color picker element within a parent class using Cypress CSS Locator. While I am able to reach the parent element, I am unsure of the correct method to target the

My user interface has a list of elements displayed in 2 columns. The first column shows the name of the item, such as Manager, Operator, and the list is expected to grow. The second column consists of a color picker element where you can choose a color. I ...

Issues with CSS styling inheritance in Angular components

I'm facing an issue with a button that is part of an InfoWindow component. The button is not created in the HTML code directly but is called whenever the card component opens. I have integrated this InfoCard into two different sections of the applicat ...

Making a Chrome extension that allows for cross-domain jQuery.Ajax requests

Looking to develop a Google Chrome extension that displays a notification based on the result of an Ajax request. I have already created the function for generating notifications, all that's left is to make the Ajax request to fetch a .php file from ...

Show error messages on a single popup dialog in MVC 4 for the model

I'm currently working on an MVC4 application that consists of Index.cshtml (the main page with search criteria and a Search button), _PartialView.cshtml (a partial view showing records with update/delete links), and Edit.cshtml (the view for updating) ...

Guide on utilizing AJAX and Jquery for redirection purposes

I am a beginner in Ajax and I came across this question before, but I am experiencing an issue in the Chrome console. Here is the PHP code snippet: $rs1 = [ 'error' => $blank_err, 'url' => "http://localhost/expe ...

Creating a weather format user interface in HTML can be accomplished by following a few

I am currently utilizing the open weather API to showcase weather data, however, I am facing difficulties in arranging the data in a format similar to the one shown below. Example output: I attempted to present the data in the following structure: ...

Tips for transferring input values from a JavaScript function to a separate PHP page for storage in a database

This code snippet allows dynamic rows to be added to a table when the add button is clicked. Now, the goal is to retrieve the values entered into the text boxes and submit them to the database. <div id="addinput"> <p> <button name=" ...

What is the secret to remaining on the same spot even after the page is reloaded?

How can I maintain the AJAX call data after a page reload? I have attempted to use code that reloads the entire page, but I would like to stay in the same location. Is there a way to achieve this without reloading the entire page? $('#updateAddressPr ...

What is the best way to create subpages within a survey?

If I want to create a survey page on the web with multiple questions, but I am facing a challenge. I do not want to have several different pages and use a "Next Button" that links to another page. I am struggling to come up with ideas on how to implement ...

Strange gap between element and border on chrome

I noticed some strange spacing between the div borders and elements when I wrapped a few divs inside a container. This issue is only happening on Chrome and Edge, while Mozilla seems to display it correctly. My code includes the usage of Bootstrap along w ...

Looking for a drag-and-drop solution using Vanilla Javascript, no need for jQuery

Looking for assistance with creating a click-and-drag solution for a background image using Vanilla Javascript. I came across a jQuery solution on Codepen, but I need help translating it into Vanilla Javascript. Draggable.create(".box", { ...

A single click causes the entire row of cards to extend seamlessly

The cards on this tab were generated using a loop and the data is sourced from a database. When I click on the "Show More" button, the entire visible column expands along with it. The expansion does not reveal the content immediately; instead, the content ...

JavaScript class name modifications are not functioning as expected

Testing a sprite sheet on a small web page I created. The code for each sprite in sprites.css is structured like this... .a320_0 { top: 0px; left: 0px; width: 60px; height: 64px; background: url("images/sprites.png") no-repeat -787 ...

How can I assign an ID to retrieve the property of <?php $row->name;?> using AJAX?

As a newcomer to Code Igniter, I am working on implementing an edit button in front of each row. My goal is to have a pop-up or modal box appear without refreshing the page after clicking the edit button, displaying all the fields within that box. < ...

Implement Icon using CSS Class in jQuery Mobile

Is there a way to use an icon in jQuery Mobile on a span element and also support retina display without giving the span a fixed width? Should I attempt to utilize Media Queries to achieve this, or is there an "official way" to do it? Thanks, Nils ...

Disregard the CSS styling within the modal window

Currently, I am working with ReactJS and ANTD. My modal has been adjusted with paddings to center-align the text, but now I want to enhance the design. Here is the desired look: https://i.stack.imgur.com/qef7n.png This is how it appears at the moment: htt ...

Steps to apply styles to an iframe element directly from its inner HTML code

Looking for help with this line of code: <iframe src="http://www.google.com" name="google" style="Z-INDEX: 0; MARGIN-TOP: -1px; WIDTH: 100%; HEIGHT: 1070px"> <html> <head></head> <body> < ...

Internet Explorer does not recognize the specific CSS code

My goal is to create a website that behaves differently on Internet Explorer browser. I am attempting to achieve this by using a separate CSS for IE and another CSS for different browsers. However, the IE-specific CSS does not seem to be working. <h ...

Issue on my website specifically occurring on Google Chrome and mobile devices

Hello, I seem to be having a CSS issue. Interestingly, my menu (burger menu) works perfectly fine on Firefox but is not functioning properly on Chrome and mobile devices. When I click the button, the menu doesn't open. Has anyone encountered a simil ...

Incorporate new functions through the css class name "javafx"

On my dashboard, I have 10 labels that share the same CSS class for mouse over events. Now, I want to change the button style after it is pressed and remove the mouse over effect. How can I achieve this? ...