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.
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.
On my website all of the text between the apostrophes (the words "what's" and "journalist's") have larger spacing than the rest of the text. http://heiditaylorlaw.com/about_me.html Why is this? I tried using the word-spacing tag in CSS with no luck.
The problem is text-align: justify;. According to w3schools:
justify Stretches the lines so that each line has equal width (like in
newspapers and magazines)
However, you can use text-align:left; instead of text-align: justify;.
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 a css class on a textarea like this..
.expanderHTMLText{
font: 12px Arial, Helvetica;
min-height: 50px;
white-space:nowrap;
}
I do not want words to break in between long words, but I do want the text to fill the box not be all on 1 line with a scroll bar. I want to get rid of the horizontal scroll but not have to break the words to do it. How do I accomplish this?
Remove white-space:nowrap; line and it will not be on one line.
Edit:
Who down-voted me? Please give me an explanation for that.
white-space: nowrap; explicitly defines, that wrapping will not occur. The only way how text can be wrapped is by removing or changing this property.
Default value for white-space property is normal, which acts almost identically to nowrap except it will wrap the text (collapse spaces).
If you do not want to words (even long ones) to be split on multiple lines, you will need to add word-wrap: normal; as JSW189 suggested.
But then you would still get a horizontal scrollbar if you would have a word which does not fit on one line - but thats obvious, you will either have word on multiple lines, either scrollbar.