Visualize whitespaces using css

css white-space
white-space css-tricks
how to remove white space in css
css trim whitespace
white space html
white-space: nowrap not working
preserve whitespace html
css preserve newlines

Is there some way to visualize whitespaces in text using only CSS without altering the original HTML code? Lets say the HTML is:

<div class="paragraph">Lorem ipsum dolor sit amet,<br/>consectetur adipiscing elit.</div><div class="paragraph">In augue ipsum, iaculis vel dapibus ut, viverra ut tellus. In ornare euismod leo a ultrices.</div>
  • paragraph end (¶) -> can use :after
  • line break (↵) -> can use :after
  • space (·) -> the only way I can think of is to prepend all spaces with something like <span class='space' /> and the use :after

The last one does not fulfill the condition to use only CSS and original HTML. Is there some way to do that?

EDIT: as requested, here is CSS for the pilcrow sign after the paragarph: .paragraph:after { content: "¶"; }

javascript and php are probably easier, but if you insist on CSS you can use a custom web font and replace the space character (U+0020) with a glyph. Information for somewhat browser compatible css and generating custom web font

Visualizing whitespace characters - CSS, In code listings, text input examples, text editors and similar it can be important to display whitespace characters unambiguously. There are a number of Unicode� Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

I doubt this can be achieved by CSS. It's selectors ar designed to select tags, not plain text.

I recommend you to use some script replace - server or client side. You can try to use PHP preg_replace or JavaScript replace functions.

CSS white-space property, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� white-space is a CSS property that helps control how whitespace and line breaks within an element's text are treated. The white-space property can take these values: normal: The default value. Multiple whitespaces are collapsed into one. The text wraps to the next line when needed.

This can be done to some extent by installing the font GNU Unifont, and then applying custom CSS rules, like so, for example, to hilight any input areas that have backspace characters in them


For my use case, I'm using a browser extension that lets me apply custom CSS rules by domain. When I want to debug something like this, I enable the css rules for that domain and can now see if a backspace character is present in the page. From my quick tests though, it doesnt seem to show TAB characters or newline/carriage returns in any visible way.

Note that I've seen some suggest creating a font that represents control characters using these unicode glyph representations, which sounds reasonable to me ;-)

Fonts that are specifically made to show "invisible" characters, and other unicode characters are discussed in more detail here

The Unicode BMP fallback font can be downloaded here

None of the font approaches seem to show much more thank a backspace visualized, from what i've found.

So unless a better font is found, perhaps the best way to do this is to use a chrome extension, and here are two that go in this direction:

How whitespace is handled by HTML, CSS, and in the DOM, The presence of whitespace in the DOM can cause layout problems and make Creating space around and inside elements is the job of CSS. are often used to display more complex pieces of UI than just text, side-by-side� CSS Text Module Level 3 The definition of 'white-space' in that specification. Working Draft: Precisely defines the breaking algorithms. CSS Level 2 (Revision 1) The definition of 'white-space' in that specification. Recommendation: Initial definition.

How To Control White Space in Text With CSS | by aliceyt, White space plays an important role in legibility. It groups and divides content, draws attention, and provides visual breaks. In CSS, we aren't� As we see from the previous image that the browser by default doesn't render these extra spaces and breaks. However, if we want to handle that manually we can use the CSS property white-space which helps us to control the white spaces processing. Following the possible combinations that can be used as a value of white-space: normal

white-space, If we want to force the browser to display those line breaks and extra white space characters we can use white-space: pre;. It's called pre� Remove whitespaces between HTML tags using comments This solution is theoretically the same as the first one, however you won't need to have your markdown in a single line, instead open a comment from the point where your element ends and close the comment where the next element starts.

The white-space CSS property, The white-space CSS property. The display of a webpage may be directed by whitespace and newline automatically. It should applied in a box rather than a full � Depending on your IDE’s word-wrap setting, it might be hard to tell where a manual break was placed. There shouldn’t be any extra breaks between the lines or the CSS will include it. i.e. An appropriate use of pre-line that will wrap each line. vs. A probably unwanted. use of pre-line that creates a visual distinction. for the user, but

  • You should use JavaScript for this.
  • Could you show how you get paragraph ends and line breaks using :after?
  • I don't think this can be done without either using Javascript or modifying the HTML.
  • Why <div class="paragraph">? That's exactly what the <p> tag is for!
  • You could try to find a font that shows dots for spaces and simply change the font to that font.
  • +1. However I would add that you'd need to consider the non-breaking space character as well, plus any other white space characters you display in your page. Also consider what happens if you use the white-space:pre; style.
  • Yep, unfortunately there's no way to match and replace characters in CSS. I'm sure of this.