What is the best way to maintain whitespace in CSS while disregarding line breaks?

The white-space property in CSS-3 offers the pre-wrap value, which maintains whitespace and line breaks while wrapping as needed, along with the pre-line value that collapses whitespace but retains line breaks and wraps when necessary.

However, there is currently no option to both preserve whitespace and collapse line breaks while also wrapping text otherwise.

Are there any combinations of other CSS properties that can achieve this desired effect?

For instance:

This  example code should     render on  one  line  but with spaces     intact.

Answer №1

Response to your query: Unfortunately, there is no straightforward way to achieve it using solely CSS. You can verify this limitation by checking out the documentation on white-space.

https://i.stack.imgur.com/w6oCi.png There are no options like: collapse | preserve | ...

The most effective way to accomplish this task is through JavaScript.

document.body.innerHTML = document.body.innerHTML.replace(/\n/g, '');
html {
  white-space: pre-wrap;
}
This  example
code
should     display
on  a  single  line  while
maintaining      spaces.

Alternative methods


Method 1st

* {
  white-space: pre-wrap;
}

br {
    display: none;
}
This  demonstration<br/>code<br/>should     showcase<br/>on  one  line  but<br/>with spaces     preserved.<br/>


Method 2nd

This&nbsp; illustration
code
will &nbsp; &nbsp; show
on&nbsp; one&nbsp; line&nbsp; still
with spaces &nbsp; &nbsp; maintained.

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 have a `null` input value. Is there a way to compute this value in relation to a date

When the input is null, what can be done to calculate the value with date? https://i.stack.imgur.com/DmFsJ.png /* // ======================================================== * * * * * How To Calculate Input Value With Date When Input Is Null * * */ // ...

Styling the sub-elements using CSS in JavaScript

Currently, I am dealing with two CSS classes: .dragbox and .removebutton. The .dragbox represents a div, while the .removebutton is a button nested within the div. On my page, there are multiple dynamically generated instances of .dragbox. I am seeking ...

Div with full height will not have scrollbars

As I work on developing a chat site, I've come across a peculiar issue with the chat display feature. Currently, my jQuery code dynamically adds chat rows to a div. My goal is to set the height of this div to 100% so that it adjusts based on the user& ...

At times, Firefox may display HTML incorrectly due to rendering issues

I recently created a CSS menu that worked perfectly on all browsers during my testing with pure HTML/CSS. However, when we integrated the code into our development environment running on cakePHP, we encountered a peculiar bug in Firefox (3.5.2) specificall ...

A layout featuring two columns: the right column has a fixed width, while the left column is fluid

I am in need of a simple solution: 2 columns with the right column having a fixed size. Despite searching on stackoverflow and Google, I have not been able to find a working answer that fits my specific context. The current approach is as follows: div.con ...

How come outerHTML retrieves <!-- --> comments?

I came across a jsfiddle link that showcases the collection of outerHTML for elements with a class='active'. Surprisingly, even when certain parts of the HTML are commented out like this: <!-- <div>'Some inner text'</d ...

JQuery Searchbar Failing to Hide Divs as Intended

I'm currently facing an issue with my <user-panel> elements, which are dynamically created using ng-repeat. Each of these elements contains child divs with the class user-panel-name. I've been attempting to use the text within these name di ...

Position on the chart in the Highcharts

I have developed 2 highcharts in the code below: <div> <p id="container"> </p> <p id="cont"> </p> </div> I specified the width and height as follows: $('#cont').highcharts({ char ...

``Why Ionic 3 Popover Sizes Should Adapt to Different Screen

Currently in my Ionic 3 project, I am utilizing a popover with a set height using the following code snippet: editOpty(rw){ let popover = this.editOptyPopup.create(EditOptyPopoverComponent, rw, { cssClass: 'edit-opty-popover'}); popover ...

Could the Error Detected by Siteimprove Regarding WAI-ARIA Criterion 1.3.1 be a Mistake?

When using the Siteimprove extension v. 126 for Chrome, the following HTML snippets are all showing an issue labeled "Input field has no description 1.3.1" Some may argue that a description is unnecessary because the aria-hidden attribute should effective ...

problem with selection of date and month in dropdown list with jquery

Recently, I've been dabbling in jQuery and decided to create two list boxes using it. One box contains dates while the other contains months. It's quite handy since I need them in different sections of my HTML page. However, when attempting to en ...

Mysterious issue causing PHP $_POST to return null

Having a bit of trouble with my PHP $_POST that keeps returning a null or empty value. Although I can't seem to spot any mistakes in my code (I know they are there somewhere), I'm on a time crunch and can't take a break. So, I was hoping som ...

What steps do I need to take in order to accomplish this specific CSS

Hey there, I have a question that may seem silly, but I am struggling to find a solution on my own. Unfortunately, my CSS skills are not the best :( I'm trying to achieve the following layout where the text should wrap at the end of the container (di ...

Utilizing conditional statements like if/else and for loops within a switch statement in JavaScript allows for

I am currently developing a request portal that involves dynamic checkboxes, labels, and textboxes that are dependent on an option list. As a beginner in javascript, I am facing challenges with creating conditional statements. I have managed to make progr ...

Having trouble with my AJAX request and can't figure out why. Anyone available to take a look and help out?

I have successfully implemented this AJAX script on various pages in the past without any issues. <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script& ...

Developing tabbed sections in XSLT

Utilizing Angular JS within XSLT, I am aiming to develop a tab-based user interface using XML data. The requirement is to generate multiple links and corresponding div elements based on the number of nodes in the XML. To manage the display of these div ele ...

The iFrame that is generated dynamically becomes null when accessed from a page that has been loaded using JQuery

One issue I am facing is with a dynamically created iframe in regular javascript. It functions perfectly fine when called from a static page using conventional methods. However, when it is being called from a page loaded by jQuery, I encounter an error s ...

Expansive picture feature within jQuery Mobile

I need help with displaying a large image (685 × 900, only 25kb in PNG) in the 'content' section so that it adjusts automatically for different screen sizes and allows users to zoom in using their fingers. Currently, I have this code: < ...

Issue with integrating SQL and PHP/HTML using a web form

I've encountered some challenges while attempting to create a social network database, specifically with inserting values into the user_ table. The database setup is in place, but there are no updates happening (no output code when redirecting to PHP ...

How to properly format credit card input using JavaScript or jQuery

I need to implement a feature where users input their credit card information, and once they complete the form, I want to display the credit card number in this format: xxxxxxxxxxxx1111 or xxxx-xxxx-xxxx-1111, without altering the actual input value. Is ...