I'm working on a large content website, and it's really bugging me that scattered throughout are double spaces, in the format of non-breaking space followed by a regular space, meaning browsers render it as 2 spaces rather than collapsing them as it would with 2 regular spaces.
Is there a way (using css) to collapse the space in this circumstance?
A non-breaking space ( ) is what it is: a non-breaking space, so nothing will help there. A regular space may or may not "collapse" into nothing - that will depend on the encoding of your page. In most cases you won't want to collapse white-spaces, though, as your text would collapse into a block...
So the only solution I see here is to search for the offending white-space and white-space and remove the part, so that you end up with a single white-space.
Related
I was surprised to find that my white-space: pre-wrap; text is wrapping at > and " characters. I thought it would only wrap at new lines, -, and after one or more spaces.
Here is a fiddle.
It wraps after ", before <. It also wraps after >, before <.
I can't find anything in the spec that says what characters allow wrapping. It only says "Lines are broken at preserved newline characters, and as necessary to fill line boxes.".
The same characters which cause wrapping normally will also cause wrapping with white-space: pre-wrap;, with the addition that newlines and whitespace in the text will also cause newlines and whitespace in the output.
Try removing white-space: pre-wrap; in your example and you will see that the only change is that there are no longer any blank lines. Otherwise the wrapping behaviour is the same.
See: https://drafts.csswg.org/css-text/#valdef-white-space-pre-wrap
pre-wrap: Like 'pre', this value preserves white space; but like 'normal', it allows wrapping.
For more details about when wrapping can occur normally, see: https://drafts.csswg.org/css-text/#line-breaking
I display a piece of text taken from a text file in an HTML page, I want the new-lines in that text file to be taken into account so I am using "white-space: pre;". on the other hand, I want to prevent the text from overflowing outside its containing div, so I added "word-wrap: break-word;"
unfortunately, the two properties don't seem to work together (the white-space overrides the word-wrap). how can I make it so both properties work together?
According to the MDN doc page, this is the desired behavior for the white-space property:
pre
Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at <br> elements.
pre-wrap
Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
So, to obtain what you described, you need to use the value pre-wrap in place of pre.
I'm using white-space: pre-wrap to allow user input to include arbitrary whitespace and have it faithfully reproduced in the output.
However, I feel that the space between paragraphs of text is too big.
Is there any way to specify... I don't know, something like line-height, but only for empty lines?
If not, the text is already being parsed for colour codes, so I suppose I could expand the parser to look for paragraphs and wrap them in <p> tags instead. That'd work. I'm just wondering if there's a pure CSS solution.
You cannot select an empty line out of a multiline paragraph in CSS only.
You can select empty elements. But I would go with your suggestion to use p tags.
So I'm working with a content editable DIV and I want to implement a smart word breaking feature like you see in most word processors, sites like Medium.com, and in the very box I'm typing this into on Stack Overflow
What I mean by smart word breaking is that if you're in the middle of typing a word and you're about to hit the end of the div then it pushes the whole word down to the next line as opposed to just breaking off the word.
Any leads on how to do this?
Thanks!
What you're referring to is 'word wrapping', where the word is 'wrapped' to the next line. This is done automatically so if you're div is not doing this then you may have a problem somewhere else. The reason this happens is because a div would word wrap normally even if it were not contenteditable so it does this by default. One way it could be disabled from wordwrapping is if you have white-space: nowrap in your CSS (more info at How to turn off word wrapping in HTML?), but this seems unlikely.
Is there any alternative for bikeshedding CSS3 property? It doesn't seem to be supported yet.
There's always the most obvious fix, which is to simply remove the whitespace in the HTML:
http://jsfiddle.net/F3Mdd/1/ - it's really easy, and it just works. From this:
<div>a</div>
<div>a</div>
to this:
<div>a</div><div>a</div>
Here's a more detailed answer.
To be honest, I always just remove the whitespace...
The white-space property
In CSS3, The white-space property is a shorthand for the white-space-collapsing (I guess bikeshedding means they don't know what to call it yet) and text-wrap properties. The white-space property is a CSS 2.1 property supported by most browsers and there are two values for it that collapse new lines:
normal (The initial value).
nowrap
But what does collapsing line feed characters mean?
According to CSS 2.1:
If 'white-space' is set to 'normal' or
'nowrap', linefeed characters are
transformed for rendering purpose into
one of the following characters: a
space character, a zero width space
character (U+200B), or no character
(i.e., not rendered), according to
UA-specific algorithms based on the
content script.
According to CSS 3:
A zero width space before or after a
white space sequence containing a
newline causes the entire sequence of
white space to collapse into a zero
width space.
Reality:
Most browsers transform line feed characters into a space. So what you really want is to set the white-space-collapsing property to discard not collapse or to collapse and then add a zero width space character before the line break.
What to do till browser support
Remove white-space from your HTML document:
<span>A</span>
<span>B</span>
To:
<span>A</span><span>B</span>
Or:
<span>A</span><span>
B</span>
Another approach is simply to wait for this CSS3 feature and remove the whitespace by Javascript until then.
http://jsfiddle.net/rT4Dy/2/
$('[data-bikeshedding="discard"]').each (function () {
var node = $(this);
node.html (node.find ('> *').detach ());
});
If I'm understanding you correctly, you mean the text-spacing property.
As far as I can tell, there isn't a lot of support.