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
Related
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 contenteditable="true" to edit a div with white-space: pre-line and found that the formatting is not being honored. It simply collapse all white spaces. Is there a way to make this happen?
Line 1
Line 2
Becomes
Line1 Line2
Which is not good since user is not able to see what they are editing. I understand there is an issue with extra being introduce for every enter key, but that one is easier to handle once it's displayed correctly.
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.
I have a div and all the long words (without spaces) flow outside the div.
Please don't mark the question as a duplicate of How to prevent long text from flowing out of a container or Long words are flowing out of the box - How to prevent?, where the problem is solved by using word-wrap: break-word;.
The disadvantage of word-wrap: break-word; is that it also breaks short words which are at the edge of the div, in a way that disrupts the flow of the text. I want short words to remain the way they are and only break the long words. Is it possible to implement this? How do other websites handle it?
it also breaks short words which are at the edge of the div
That's not true...word-wrap: break-word; shouldn't do that.
Perhaps you're confusing this with the word-break: break-all; property (which doesn't work in all browsers).
See this jsfiddle for a comparison:
http://jsfiddle.net/Snu8B/3/
For firefox you could try the hyphens property.
If you are willing to "hide" the words you can play with overflow:hidden
.mydiv {
height : youchoose;
width : youchoose;
overflow: hidden;
}
Otherwise:
word-wrap : normal|break-word;
normal : Break words only at allowed break points
break-word: Allows unbreakable words to be broken
word-break: normal|break-all|hyphenate;
normal : Breaks non-CJK scripts according to their own rules
break-all : Lines may break between any two characters for non-CJK scripts
hyphenate : Words may be broken at an appropriate hyphenation point
I have the following style already: white-space: pre-wrap;
This allows newlines to be treated as newlines (and spaces don't get collapsed) for the element.
Now I want to apply text-indent: -40px; padding-left: 40px; in an attempt to produce something like this:
This is a long line of text (or at least, just pretend it is) so it
will indent when it wraps.
Further lines of text appear as normal, but again if they exceed the
maximum width then they wrap and indent.
Unfortunately, it's not doing quite what I intended:
This is a long line of text (or at least, just pretend it is) so it
will indent when it wraps.
Further lines of text appear as normal, but again if they
exceed the maximum width then they wrap and indent.
Is there a way in CSS to indent wrapped lines, but counting newlines as a new first line?
No, because text-indent relates to the first line of an element, and newlines generated by line wrapping do not create elements. So instead of just newlines in HTML source, you need to use some content markup.