I know that I can use <br> for a simple line break. I also know that I can add indentation by adding styling to a <p style="margin-left:12px">.
Now I have a problem, which is that <p> breaks two lines, it is almost like inserting <br><br>.
I cannot apply styling to <br> and also am unable to figure out how to prevent the double line break from <p>.
Is there something like an element that does not break lines or similar? No matter what element I add to apply styling, they have that double line break, e.g. div.
The Look
What I want
some text
some other text
even more text
What I was able to achieve
This is what I get using three <p> with margin-left styling:
some text
some other text
even more text
This is what I can achieve with br:
some text
some other text
even more text
Try using span elements with float: left; clear: both; and then use whatever margin-left you want.
You can use this trick to achieve your goal
span{
display:block;
text-indent:12px;
}
span samp{
display:block;
text-indent:24px;
font-family:initial;
}
<p>
Some text
<span>
Some other text
<samp>Some other text</samp>
</span>
</p>
A <p> (paragraph element) is a block-level element. This means, on default it will be positioned in a new row.
That's why you see a double linebreak.
So therefor, use inline elements like <span> to move the text to the right.
<p>some text<br/>
<span style='margin-left:12px'>some other text</span><br/>
<span style='margin-left:24px'>some more text</span></p>
Deleting margins (margin-top and margin-bottom, most importantly) from p elements make them act like lines of text one below another and then use of <br> creates single linebreak. However if you want to add margin-left based on position of given p you can't do this without any SCSS or hard coding values for child number 1, 2, 3 and so on. Other posts on SO about same problem:
Post 1, post 2, post 3.
p {
margin: 0;
}
<p>test test test test test test test test test</p>
<br>
<p>test test test test test test test test test</p>
<br>
<p>test test test test test test test test test</p>
<br>
<p>test test test test test test test test test</p>
Related
In the below code, I need to hide the 2nd tag and it's related content, how can I do that in Css
<div id="content-list">
<b>Title:</b> some random text <br/>
<b>Title2:</b> some random text 2 <br/>
</div>
With the below css I can only hide the 2nd b tag, but not able to hide the text.
div > b:nth-child(1) {
display: none;
}
Note: HTML mockup can't be modified due to various reason.
There is no way to reference a text node in CSS. However there are probably some hacky ways to accomplish this.
One way you could do this, if the layout supports it, would be to hide the title and anything adjacent to it using a large, negative number for margin-left.
.content-list > b:nth-of-type(2) {
margin-left: -1000000px;
}
<div class="content-list">
<b>Title:</b> some random text <br />
<b>Title 2:</b> some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text <br />
<b>Title 3:</b> some random text <br />
</div>
As you can see if you run the snippet, there are some issues. Mainly there will just be a blank like in the place where the text was. Plus any one using a text reader will still have access to it.
The only real solution will be either to fix your html or use JavaScript.
"I can only hide the 2nd b tag, but not able to hide the text"
That's because the text "some random text 2" is outside of the tags.
Since you can't actually select text nodes directly, one work-around would be to set the font-size of the parent element to 0. Then reset the font-size for those desired b elements. In doing so, only the b elements should appear, and the adjacent text nodes should effectively be hidden.
div {
font-size: 0px
}
div > b:nth-child(1) {
font-size: 16px
}
<div>
<b>Title:</b> some random text <br/>
</div>
An alternative solution is to change the original HTML to something more like this, which is highly recommended in terms of accessibility:
#content-list div:nth-child(2) {
display: none;
}
<div id="content-list">
<div>
<h2>Title 1</h2>
<span>some random text</span>
</div>
<div>
<h2>Title 2</h2>
<span>some random text</span>
</div>
<div>
<h2>Title 3</h2>
<span>some random text</span>
</div>
</div>
I have the following code
<p>Test
<sup>1</sup>
<sup>, 2</sup>
</p>
Which are displayed like 1 , 2. When I try apply some style I don't know where, since no margins or paddings are set. So, which style should I apply for all but the first sup?
You can try just using one sup. If you need two, you can also try applying a negative margin on sup. Since you don't need it on the first-child but need it on all other children, use this:
p > sup:not(:first-child) {}
See it working here:
p>sup:not(:first-child) {
margin-left: -4px;
}
<p>Test
<sup>1,2,</sup>
<sup>3</sup>
</p>
<p>Test
<sup>1,</sup>
<sup>2,</sup>
<sup>3,</sup>
<sup>4</sup>
</p>
<p>Test
<sup>1,</sup>
<sup>2,</sup>
<sup>3,</sup>
<sup>4,</sup>
<sup>5,</sup>
<sup>6,</sup>
<sup>7,</sup>
<sup>8</sup>
</p>
Does this solve your problem ?
<p>
<sup>1, 2</sup>
</p>
If you have to use two elements, then try
<p>test
<sup>1</sup>
<sup style="margin:0; margin-left:-5; padding:0;">, 2</sup>
</p>
I hope I could help you, otherwise I'll need some more info.
Just place the comma inside the first <sup> element rather than in the subsequent ones like so:
<p>Test
<sup>1,</sup>
<sup> 2</sup>
</p>
A popular online forum that I post to does not have the ability to create inline code spans in posts. Therefore, I'm creating a userscript in Tampermonkey to turn code blocks into inline code spans unless they're immediately following a line break <br>. I've made a Tampermonkey script so far that injects a style into the <head> of the online forum, using the following selector:
br + code {
background-color: yellow;
}
<body>
<h2>Example A (this is correct)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
<code>But after a line break, the code is yellow!</code>
</p>
<h2>Example B (unwanted behaviour)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text...
<code>...but the code is still yellow!</code>
</p>
<h2>Example C</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text and an empty span <span></span>...
<code>and that makes the code not yellow anymore!</code>
</p>
</body>
Example A works perfectly, selecting only the code span that immediately follows the line break. However, example B has unwanted behvaiour.
The problem with example B is that there is plaintext content in between the line break <br> and the inline code span. It seems like the CSS selector is selecting the code span after the line break even if there is plain text content in between them and making it yellow, but I don't want that.
Example C is an HTML way of fixing this issue. I added an empty <span> in between the <br> and the <code>. This caused the CSS style not to select the code, deciding that the code was not the first element to follow the <br>.
But I would prefer a CSS-side fix to this issue. What is it, if any?
Unfortunately, because of this forum having strict policies on what tags are allowed in forum posts, any alternate methods won't work. I need an answer that actually solves the posed qustion, and I can't change the HTML provided in any way, otherwise it's likely to get stripped from my forum post. The following is a list of what I have tried. In all of the following cases the additional info will be stripped:
Attempting to put CSS classes on the parts I want to style.
Attempting to add attributes other than font-size to a section of text.
The only reason that the empty span solution (example C) works for me is that the forum server lets you set font sizes with <span style="font-size: 12px">. If I were to go through with what I have now, I would need to surround part of the line before the inline code span with this.
This isn't a CSS issue, but rather a misunderstanding of the semantics and purpose of the <p> and <br> tag. Here is a great SO post talking about semantics and their importance.
TL:DR: Restructure your HTML to be semantically correct before worrying about your CSS, and use CSS classes as appropriate rather than complicating your code with sibling selectors:
.highlighted {
background-color: yellow;
}
<p>Your first paragraph</p>
<p>A second paragraph without the linebreak</p>
<code class="highlighted">... code that is highlighted ...</code>
<p>A third paragraph</p>
<code>... this code isn't highlighted ...</code>
Why you don't put all element that you need to change background to
<div style="background-color: yellow;">
<br>
<p>
</div>
Using :nth-child() selector, <code>...<\code> can inherit its background color from its parent element or can override with a custom background color. For example, it can be implemented in your given HTML as below:
br + code {
background-color: yellow;
}
h2:nth-child(3) + p code:nth-child(3) {
background-color: inherit;
}
<body>
<h2>Example A (this is correct)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
<code>But after a line break, the code is yellow!</code>
</p>
<h2>Example B (unwanted behaviour)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text...
<code>...but the code is still yellow!</code>
</p>
<h2>Example C</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text and an empty span <span></span>...
<code>and that makes the code not yellow anymore!</code>
</p>
</body>
I"ve one heading we can call we are display it inside H3 tag.
So we need to add line break so it will be like bellow example. can please help to get it resolve:
<h3>This (Line Break) is (Line Break) heading</h3>
Note:
<br/> , /n
is not working
Use <br> inside the <h3> tag
<h3>
test <br>
test <br>
test
</h3>
This is a very small HTML question that I am sure you guys will answer quickly. I post things on my website like this
<div id="content">
<p>
<hh>Header text here</hh>
Post information here, text and stuff.
</p>
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
</p>
</div>
but when I try to insert a <center> or alight left tag, the <p> closes automatically, and everything after the <center> tag is outside the paragraph box. I used inspect-element in firefox, and I can see it closes with a </p> that I never typed, right before any calls to centered text.
For example:
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
<center>This text is centered</center>
</p>
is rendering as this:
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
</p>
<center>This text is centered</center>
</p>
This is really frustrating, and if someone could help me out that would be amazing. using <div align-right> also doesn't work. If it helps, I can set the entire <p> to align any way and it works.
It ONLY breaks when I differ from the set orientation within that tag.
From w3school :
Use CSS to center text!
The tag is not supported in HTML5. Use CSS instead.
The element is deprecated in HTML 4.01.
http://www.w3schools.com/tags/tag_center.asp
It is because center acts like a p. And you cannot put a p in a p.
EDIT : To answer to your comment, you should probably do this :
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
<span>This text is centered</span>
<p>
And in your css add this
#content p span { display:block; text-align:center; }
(It also works with an a tag if you want it)
That's probably because you can't use a hh-tag in a p-tag then. (Not sure, but that's mostly)