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.
Related
I'm making a rich text editor which is like a clone of Google Docs. For reasons I won't get into here, each line in the text editor is wrapped into its own div container. For example, if there's 3 lines of text, there will be 3 child "line nodes" (rendered as an unstyled div) in the text editor. And within each line node there are inline span elements to control styling such as Bold, Italic, etc.
The issue I'm having is I can't understand why there is an unsightly vertical gap of whitespace between each line when selecting text over multiple lines. I am using Draft.js for this, but from what I can see it shouldn't make a difference; there's no styling or margins applied. I've even tried making every line div and its span elements exactly the same height but the problem persists.
My guess is this is caused by some native browser behaviour. All I really care about though is: can I "fix" it? I mean, I know it's possible because Google Docs doesn't have this spacing issue when selecting text... But then again it uses a completely custom rendering engine with custom cursors too. Thanks for any suggestions
edit: so a temporary workaround I've found (see image below) is to reduce the height of each div and span to a fixed value (in this case, height: 16.4px). But for obvious reasons, this isn't an ideal solution. I'm still looking for a "proper" way to implement whatever styling I want and not have these gaps appear between adjacent divs when selecting text
I believe your talking about line-height in which you can control the space between two elements / texts.
Try it out below:
div {
line-height:100px;
}
<div>Hello World!</div>
<div>How are ya?</div>
Thank you for all the suggestions. Turns out this is quite a challenging issue and there's very little (if anything) that can be done with pure CSS. Only the height attribute of div or span elements appear to have any visible impact on text selection. Inspecting the Google Docs elements reveals they use their own custom selection engine:
Closing this because I at least know how a solution might be implemented now, even if it would be very complex and time-consuming. Thanks again for the suggestions.
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 his demo page, PPK says that text-overflow:ellipsis requires (among other things) that "the box has white-space: nowrap or a similar method of constraining the way the text is layed out."
Does anyone have any idea what other types of "constraints" he's referring to? I've tried all the other options for white-space, but none of them give me what I want. I don't believe that all he meant by the phrase "similar method of constraining" was simply "any other white-space setting," but I haven't been able to think of any other text-layout constraints.
I ask because I'd like to display up to two lines of text before visually truncating the text (which I accomplish using height:2.5em), and white-space:nowrap prevents the text from wrapping to fill the space I've allocated.
You need white-space: nowrap if you want to use text-overflow: ellipsis in a useful way.
I don't know what "similar method of constraining the way the text is layed out" he could have been thinking of.
I ask because I'd like to display up to two lines of text before
visually truncating the text
I don't think CSS can do it. Here's an answer where I say the same thing, and 10 months later with 612 views, nobody has disagreed.
Page in question: http://www.rjlacount.com/public/lander/
I'm probably just doing something stupid, but I'm trying to indent the second line of wrapping text inside the form (with "Your account: test#test.com" at the top) and I can't seem to get anything to work.
I would think the solution is:
form span {padding-left:1.5em;text-indent:-1.5em;}
but this only seems to indent the first line of each section.
Another look at this would be much appreciated, thanks!
If the element is inline it will indent the first line, otherwise if it's a block element it will indent the rest of the lines, which is just like Briguy37 said, since that's the difference between DIV and SPAN.
I just wanted to clear out that it's not a "problem with span".
For some reason, this works with a DIV, but not with a SPAN. Not really sure why, but here's a fiddle with the same CSS for both.
spans are handled as inline elements.
Considering them as actual characters helps to conceptualize the changes. A space after a span is retained because it's like a space between characters. You adjust height by line-height rather than simply height. etc etc
Usually if this is causing a problem you can just use a div and set display:inline-block; if you need horizontal alignment.
I've got a block of regular text inside a div. I'd like to use CSS to apply style to the words themselves, but not the whitespace between them.
For example, let's say I have this passage of text:
The dog barked.
I would want to style the three words with a background color, but then not style the space between the words.
Is this even possible? I feel like I'll probably have to break up the words into individual 's and do it that way, but I'd rather add any markup to the text.
No, it's not possible with CSS alone. Using JavaScript you could split the string and apply spans to the text to style them differently, but nothing in CSS alone will do what you want.