html and css code to create a linebreak ↵

I received a JSON response from the server, and within this data is a "return line" in the text.

{text: "I appear in the first line ↵ and I appear in the second line"}

However, when I try to display this on an HTML page, the "return line" does not show up.

"I am in the first line and I am in the second line"

Instead of:

The text appearing in one continuous line without breaks as intended.

Any suggestions or solutions utilizing HTML, CSS, or possibly JavaScript would be greatly appreciated!

Thank you!

javascripthtmlcss

Answer №1

the issue was resolved by including this specific CSS class!

white-space: pre-line;

Answer №2

Users have suggested replacing the new-line characters with HTML line-breaks to format the text.

const update = str => str.replace(/[␤␍␊↵⏎]+/g, '\n');
const br2nl = str => str.replace(/\n/g, '<br>');

var content = {
  "message" : "First line with a break here ↵ and second line continuing"
};

document.getElementById('content-display').innerHTML = br2nl(update(content.message));
<div id="content-display"></div>

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

Received an empty response while making an AJAX request - ERR_EMPTY_RESPONSE

I am trying to fetch real-time data from my database using Ajax, but I keep encountering an error. Here is the code snippet: <script> window.setInterval( function() { checkCustomer(); //additional checks.... }, 1000); function che ...

javascriptphpajax

Remove array element by key (not numerical index but string key)

Here is a JavaScript array that I am working with: [#ad: Array[0]] #ad: Array[0] #image_upload: Array[0] 13b7afb8b11644e17569bd2efb571b10: "This is an error" 69553926a7783c27f7c18eff55cbd429: "Yet another error" ...

javascriptarrays

Error occurs when attempting to reference an object from an NPM package

Currently, I'm attempting to utilize the https://github.com/iamcal/js-emoji library for colon-to-emoji conversion. Following the installation of its NPM package, I included <script src="../node_modules/emoji-js/lib/emoji.js" type="te ...

javascriptnode.jsnpmemojireferenceerror

Sharing information between controllers while being initiated using $rootScope.$emit

I've created a common module that includes a controller, component, and template to initialize the app and set up the base layout. Within this module, there is also a stateful component that makes an HTTP GET request during initialization to fetch a b ...

javascriptangularjs

Trouble locating Angular module while referencing script as an ES6 module

Check out this simple plunk here. My goal is to reference the app.js file as an ES6 module by setting the type attribute of the script tag to module. However, when I add the type attribute, Angular is unable to find the module. If I remove it, then it work ...

javascriptangularjsecmascript-6traceur

Tips for managing Express.js callbacks and modifying an object's property from within a function

I am currently working with two JavaScript files. I have successfully retrieved data from MongoDB using the method bookDao.getActiveBookByCategoryId(). The Issue I Am Facing: Within the categoryDao.js file, I am attempting to update the resultJson.book_c ...

javascriptnode.jsmongodbexpresscallback

Is it possible to utilize Nuxt context within nuxt.config.js?

I am utilizing nuxt-i18n and @nuxtjs/auth in my project. I am looking to configure the auth.redirect option to support i18n as shown below: // nuxt.config.js export default { modules: [ '@nuxtjs/auth', 'nuxt-i18n', // .. ...

javascriptvue.jsnuxt.jsnuxt-i18n

The layout generated by Metronic does not display the CSS styles

I've been working on creating a Metronic layout using the layout builder, but I'm running into an issue. Whenever I try to open index.html, all I see is this: screenshot It appears that the CSS styles are not loading properly. Interestingly, wh ...

htmlbootstrap-4metronic

The print preview displays a single div in an incorrect location

I have successfully created a javascript plot and wanted to incorporate a legend that overlaps the plot. Unfortunately, the function I used does not support directly overlapping legends, but it does allow for placing the legend in a separate div. To work a ...

javascripthtmlcss

Continuously flowing chain of replies from a series of queries using RxJS

I am exploring the world of RxJS and seeking guidance from experienced individuals. My goal is to establish a synchronized flow of responses, along with their corresponding requests, from a stream of payload data. The desired approach involves sending ea ...

javascriptreactive-programmingrxjs

What can you do with a 2D array and getElementsByTagName?

My current challenge involves trying to utilize JavaScript to access table cells by using the getElementsByTagName method. The end goal is to compare each cell in the array to a specific value and then change the background color of that cell based on the ...

javascripthtmlgetelementsbytagname

Is it possible to override CSS classes in Ionic without using app.scss?

I'm currently working on designing a dark theme for my ionic application by watching this tutorial. It's been effective for most of the classes, however, I've encountered some CSS classes that only respond to overrides in app.scss. If I try ...

cssangularionic-frameworkionic3

To obtain the desired response, I must make an additional GET request

Upon sending the first GET request to this endpoint, I receive a response of allEvents = []. However, if I wait a few seconds and hit the endpoint again, I get the desired results with a populated allEvents array. It seems that the function is not executin ...

javascriptnode.jsasynchronousexpress

Error message 800A03EA in Windows Script Host encountered while running Express.js script

I'm currently diving into the world of JavaScript development, following along with the guidance provided in the book called "JavaScript Everywhere." The book instructs me to execute the following code: const express = require('express' ...

javascriptexpresssyntax

Issue with Rails: Content_For not functioning properly when combined with AJAX or when attempting to rehydrate JavaScript files

Currently, I am utilizing ajax to load all my views, and it's functioning perfectly except for one issue. My view pages that are being loaded are not referencing my JavaScript files. Below is an example of my coffee-script: jQuery(function() { Stri ...

javascriptjqueryruby-on-railsajax

Conditionally display content based on the existence of a specific value within an array

Is there a way in AngularJS to display a value using ng-show, such as ng-show = "role in ['admin', 'user', 'buyer']" I want to display a div if the role matches any of the elements in the array. ...

javascriptangularjs

What is the best way to incorporate the "child_process" node module into an Angular application?

Trying to execute a shell script in my Angular application has been quite the challenge. I came across the "child process" node library that might be able to help me with this task. However, every attempt to import the library led me to the error message: ...

javascriptnode.jsangularshellelectron

Retrieving Data from all Rows in jQuery DataTables

Is there a way to copy all rows in jQuery DataTables into a JavaScript array by clicking the header checkbox? https://i.sstatic.net/57dTB.png I need to locate where jQuery DataTables store the HTML for the remaining page of rows so that I can manipulate ...

javascriptjqueryhtmlajaxdatatables

Issue with formatting and hexadecimal encoding in JavaScript

I am currently developing a LoRaWAN encoder using JavaScript. The data field received looks like this: {“header”: 6,“sunrise”: -30,“sunset”: 30,“lat”: 65.500226,“long”: 24.833547} My task is to encode this data into a hex message. Bel ...

javascriptjsonhexencodelorawan

React code displaying misalignment between label and input

Can you help me align my URL and https:// on the same margin? https://i.sstatic.net/hxkkC.png <div className="card"> <div className="card-body"> <div className="form-group col-12"> <label cla ...

javascriptcssreactjs