white-space: none;
polyfillwhite-space: none;
is a highly requested feature of the CSS Text Module but is, as time of writing, only recognized as an issue in CSS Text Module Level 3 (Issue 3). UPDATE Issue 3 has since then been removed from the specs.
Original written as a proof-of-concept, I've found white-space: none;
really useful and it's now ready for development usage. You're probably better off using HTML comments, HTML minification or similar in production but for development, it's pretty tight.
You can find a list of sites and people discussing issues with not having white-space: none;
on the wiki.
Since version 1.1.0 a white-space-fast.js
is supplied. It comes with another caveat (see Issues below), but should be fast enough to be used in production. Which means you don't don't have to fix your white space issues.
white-space-fast.min.js
should be placed inside your body tag to prevent it from running too soon on IE, on initial load with empty cache.
I encourage you to experiement with the exact placement of white-space-fast.min.js
, as slowly loading js files (jQuery ect.) will impact the perceived performance of this white-space: none;
implementation. Feedback is welcome in the issue tracker.
white-space-fast.js
doesn't support IE8.
CSS
.foo {
display: inline-block;
white-space: none; /* this is the API which removes white space based on your CSS selector */
}
bower
bower install css-white-space-none
<!-- insert where ever you want -->
<script src="bower_components/css-white-space-none/white-space.min.js"></script>
OR
<!-- insert inside your body tag - since version 1.1.0 -->
<script src="bower_components/css-white-space-none/white-space-fast.min.js"></script>
When the white-space: none;
rule has been enforced, the parent element dispatch a WhiteSpaceDone
event. You can listen on the document and use the target property to determine which elements children has white-space: none;
applied.
// always attach event listeners before they can be triggered to avoid race conditions,
// e.g. this snippet should be before you include white-space-fast.js
document.addEventListener("WhiteSpaceDone", function(e) {
console.dir(e.target);
}, true); // set useCapture to true if you're not listening on the element dispatching WhiteSpaceDone
white-space.min.js
2050 bytes (minified)white-space.min.js.gz
1044 bytes (gzipped)white-space-fast.min.js
1991 bytes (minified)white-space-fast.min.js.gz
1043 bytes (gzipped)white-space: none;
comes with a few known limitations, you need to cater for.
white-space: none;
inside @media queries - unless you want to apply white-space: none;
to the selector regardless of your media query.white-space: none;
in external style sheets - the script won't look anywhere else.Let me know, in the issue tracker, if you stumble upon anything weird.
The implementation works by removing empty nodes in the DOM, that are siblings to a node with white-space: none;
. The child nodes doesn't inherit white-space: none;
.
Furthermore, this polyfill only parse external CSS. So it won't even look at CSS in the header or inline.
white-space-fast.js
calls the removal of empty DOM nodes on document.readyState == 'interactive'
as oppose to white-space.js
, which remove empty DOM nodes on document.readyState == 'complete'
.
Version 1.1.1 also test for document.readyState == 'loaded'
.
I decided to include a realistic use-case, which really isn't a test-case but included as such, because
it's useful to test white-space: none;
in a realistic environment.
So far there is one use case, three test cases and one test case that include all three:
white-space-fast.js
* Click the "Run white-space:none; script" button at the top
white-space-fast.js
doesn't support IE8)white-space-fast.js
doesn't support for IE8)NOTE: IE7 support requires that querySelectorAll
is replaced with something similar.
white-space-fast.js
- it's now removedwhite-space-fast.js
(see #5);
was missing at the end of the white-space:none;
declaration (e.i. when minified).white-space: none;
white-space:none
was found in CSSCopyright © 2013 Jon Ege Ronnenberg This work is free. You can redistribute it and/or modify it under the terms of the Do What The Fuck You Want To Public License, Version 2, as published by Sam Hocevar. See for more details.