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.
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
Here's the live site: http://chadfraser.com/
As you can see, if you look on mobile or scale your browser window, the words break in strange places. I could add hyphens, except my client is a professional writer and doesn't want them. We shouldn't need them though - I can't figure out why the words won't just wrap with the white space.
Any thoughts would be appreciated.
Its because your code is assigning word-wrap: break-word; It causes the word to break in half if necessary.
Most precisely, it is been set in styles.css on line 51:
body {
word-wrap: break-word;
...
So, your entire document will behave like this. Set the property to word-wrap: normal on the elements you don't want to break, or just remove this property from the body
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.
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.