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.
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.
This question already has answers here:
Is putting a div inside an anchor ever correct?
(16 answers)
Closed 8 years ago.
I'm making a website that utilizes spans with a background-image:(so basically a picture) with a span nested in that that will display text over the picture.
The text and picture spans are both links that would go to the same place. I want my users to be able to click anywhere on the text or picture to navigate away from the page.
Instead of using using two tags that will link to the same thing in the same line of code, I noticed that I can put two spans, both the picture and the text, inside of the same tag and Chrome allows it.. but I don't know how support is on this kind of thing in other browsers.
Here's an example of what I'm doing:
<a href="https://theartofmikeyjoyce.com/">
<span class="cell E4">
<span class="text">MIKEY<br/>
<p>IN THE CLUB II</p>DIGITAL COLLAGE
</span>
</span>
</a>
Now normally I'm aware that anchor tags shouldn't have inline elements so I set display:inline-block' on the span tags. I'm also using HTML5, and the documentation I found on this was vague at best. The code seems to work on all modern browsers I've tested, but is this really canon?
HTML and CSS are two separate things. HTML5 defines which elements may and may not be nested in which other elements, and while it also suggests how they should be displayed, how this display is implemented is specified by CSS.
Changing the CSS display mode of an element does not change where it may appear in an HTML document, since HTML doesn't know how an element is being displayed using CSS (if at all).
In HTML 4, the a element may only contain other inline elements. Note that HTML 4 has its own definition of "inline" and most if not all inline elements correspond to display: inline in CSS, but again, the two languages are separate.
In HTML5, the a element has a transparent content model, which means any element can appear as a child of the a element provided that element can appear as a child of the parent of the a element. So for example, while a section > a can have a div as a child, a p > a cannot, because a div may appear within a section, but never within a p.
These are rules given by the HTML standard, but as you can see they say nothing about whether an inline element can contain inline-block elements. You will find that information in the CSS standard instead.
In summary, inline-block elements are similar to block boxes, except that they are laid inline, just like regular inline elements. That's all there is to it. Assuming your a element is an inline element, browsers should have no problem rendering inline-blocks along the same line(s) as the a element (as its children, of course).
On the other hand, if your a element were to contain block-level elements (i.e. display: block), the behavior, while still pretty well-defined, becomes less predictable thanks to browsers like Chrome.
I think this is what you are looking for.
HTML 5 states that the element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".
Usually no, but if set to display: inline you should be fine.
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 element (e.g. a label) with a fixed width and I want that only the text to be dotted-underlined. If a do the "trick" with border-bottom the whole box will be underlined
I think this explains my problem
You should wrap it into a span and add that border-bottom style to that span: http://jsfiddle.net/mrg9a/2/
You could wrap the text in <span> tags and then apply the style to the spans.
See the second element in this jsFiddle example.
Since label elements are inline by default, the problem is caused by making them inline blocks. This in turn is presumably an attempt to avoid using the most natural and most effective way of structuring a form, namely an HTML table. Just switch to table markup and use label inside td with no fancy settings, and the label elements will take the border you set on them, in their natural width.
How would you go about applying a background color with CSS only, while only applying the color to visible text.
I am trying to achieve the following:
<div style="width:200px;background-color:white;">
<p style="background-color:red;color:black;">This text is longer than 200 pixel and therefore a line break will occur</p>
</div>
Unfortunately the background is applied to the full with of the <p>-tag and not ending with the last character before the line break occurs. On the side note, I am NOT able to line break the displayed text manually.
So if the output the above would look like this:
----------this line is exactly 200px----------
This text is longer than 200 pixel and
therefore a line break will occur
----------------------------------------------
So the background-color should end with the word "and" on the first line and end with the word "occur" on the second line, leaving the background of the <div> white.
I am really pulling my hair out and would love to get input if this is even possible without manually setting line breaks? I'd go with a javascript solution too, but prefer a css only one.
Paragraphs are block elements - they take up the width of their containers, not their content.
You need to use <span> instead of <p> to get the desired effect.
Alternately you and make <p> an inline element, but this may break other aspects of your page.
p {display:inline}