I'm currently wondering about the following problem: I have for example a simple header H1 with a SPAN tag inside which I want to style differently by CSS depending on the position of the SPAN element, meaning I need to detect if the span element is in line with the text node content of the H1 tag or is pushed to a new line because it doesn't fit in the line.
<h1>
This is a header
<span class="special">Special content</span>
</h1>
Is there anybody out there having a good idea or even a solution to this?
Javascript
Just use javascript to add/remove class if element is or is not wrapped.
JSFiddle
CSS
But if you really want to use just css then you can try with this problematic solution:
Use ::first-line pseudo element to style header and then style span as rest of h1. The problem is that it could style also your header if it would wrap at some point.
h1::first-line {
color: black;
}
h1 {
color: red;
}
<h1>
This is a header
<span class="special">Special content</span>
</h1>
Sadly, CSS does not have any complex mechanism for managing lines.
Related
I have a text that contains some HTML, and then I use the v-html to display the text. Since the text is rather long, I need a Read more that the user can click on. The Read more must be on the same line as the text.
The code becomes like this:
<div v-html="some-variable-containing-html"></div>
<a #click="makeMoreTextVisible()">Read more</a>
Since I want the Read more to start exactly where the HTML text ends, I would normally use display:inline, but here it does not work.
Has anyone come across this problem?
The div is display:block by default, which starts the element on its own line, pushing Read more to the next line.
You could change the div to a span, which is display:inline by default. This assumes that the HTML variable doesn't contain an element that pushes elements to the next line like the original div.
demo 1
If your HTML variable contains display:block elements (such as div or p), you could apply a class to the HTML container that forces its last child element (with :nth-last-child) to display:inline:
<template>
<div>
<div class="container" v-html="myHtml"></div>
<a #click="makeMoreTextVisible()">Read more</a>
</div>
</template>
<style>
.container {
display: inline;
}
.container :nth-last-child(1) {
display: inline;
}
</style>
demo 2
I wrote simple CSS to align text using the w3schools example with:
text-align:center
When I add an underline in the same format, the underline works.
Here's the snippet:
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
Here's the w3schools page (the align text section):
https://www.w3schools.com/css/css_align.asp
In my full code I have the text I want to center inside another box. I've tried it both inside that box and outside any boxes. It doesn't center.
.CenterIt {
text-align:center;
display:block;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
The display property of span by default is inline. i.e.,
display:inline;
Therefore, <span> will take only the width of its content. In contrast, block elements like <div>, by default, take the full line (and thereby the full width of the page) for its content.
To make the text-align work for <span>, you need to change it into a block element.
Set
display: block;
for the span with .CenterIt class. This will make .CenterIt take the full line (and thereby the full width of the page), and then the text-align: center; will centralize the content.
Try this. You need to wrap it with a container unit of <div>
<div class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</div>
Following will work as well
<span class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</span>
It might work better if you run “display: flex;” on the container span and “justify-content: center;” on the child span. Flexbox is a little easier to use when placing items within a container.
Because your html, is in wrong format. You cant have a span child of a span.
try like this:
<div class="CenterIt">
<span class="UnderlineIt">Registration Form</span>
</div>
to have the span centered , without a parent div you would need to put the display, as block.
so you could have on your html and css like this:
span{display:block;}
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
html:
<span class="UnderlineIt CenterIt">Registration Form</span>
I have a div that says "Tags: Example 1, Example 2"
The css looks like this:
.tag {
color: #bbb9b9;
font-size: 8pt;
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
.tag:before {
content: 'Tags: ';
}
.tag:empty {
display:none;
}
Now, if no tags show up at the Wordpress post, I also want to hide the text "Tags", but it is in a :before tag.
Is there a way to hide the :before element somehow? Since the :before element is never actually empty, I'm finding it hard to fix.
The :empty pseudo selector will select elements that contain either nothing or only an HTML comment.
It will only work if the div is completely empty or has comments.
<div></div>
<div><!-- Comment --></div>
If the div has space or tabulations, you will have to use the pseudo element :blank
<div> </div>
<!-- Notice that inside this div there is a blank space -->
<div>
<!-- Comment-->
</div>
I think maybe this is what might happen. Although there is no content, the div may have some space or tabulation. If this doesn't help, it would be nice to have an example of the html code when it's theoretically empty.
My display code could look like this:
<div class="displayApproved">
<span class="bold">this is my text</span>
</div>
My .displayApproved has a padding-top:8px; to align to its neighbor element, and this works fine with non-bold content.
When there's a <span 'class="bold"'> inside, is there a way to adjust the padding on the div to 9px without creating a new class "displayApprovedBold" (several content pages would need changing)? If there's an advanced CSS rule though that would adjust that div's padding if the div contained that bold span, then one change and I'm done.
With jQuery you can just do:
$('.displayApproved:has(.bold)').css('propery', 'value');
I have the following HTML chunk:
<span class='instruction_text'>
Line 1<br>
Line 2
</span>
And the CSS declaration of instruction_text is:
.instruction_text {
margin-left: 70px;
font-style: italic;
color: #555;
}
The first line has a 70px margin as expected, but the next line starts with no indent. How can I make ALL of the lines indented?
Use a block-level element. <div> is block-level by default, but adding the CSS display:block to your instruction_text class should send you in the right direction.
Using BR tags inside a SPAN element doesn't make a lot of sense as SPAN in an inline element which means it's meant to be used in the flow of a line of text or other inline elements.
You really should be using an element that is a "block" level element like DIV or P, e.g. one that is designed to contain multiple lines of text (or inline elements).
As you'll have noticed, you CAN use a BR tag inside a SPAN and it will cause a line break, however inline elements don't play well with margins/padding etc.