I am displaying some code blocks in my NextJS project. A normal HTML file outside the Tailwind project displays each <span> item on a new line, but Tailwind CSS displays them on the same line without any breaks.
I want each of these <span> items on a new line in my code because they are easy to read, and the design looks better. However, I don't want to change their class names because there are many HTML files, and there would be a lot of repeating work for me.
Tailwind resets everything. I want to change the Tailwind styles to default ones. Is there any way to achieve this?
<div="container mx-auto">
<div class="bash">
<pre>
<code>
<span>$ ls</span>
<span>cat /etc/passwd</span>
</code>
</pre>
</div>
</div>
A span tag is an inline level element, so it is expected behaviour for spans to be inline with each other.
I you want to make all your spans display on their own line (block level) then target the span tag and set it to display: block
span {
display: block;
}
Your HTML is incorrect, it should be.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css">
<div class="container mx-auto">
<div class="bash">
<pre>
<code>
<span>$ ls</span>
<span>cat /etc/passwd</span>
</code>
</pre>
</div>
</div>
As someone pointed out, spans are inline objects by default so a "normal" HTML page wouldn't display spans on their own line unless one of its ancestors is forcing it or CSS for the spans are changing it up. Remember the rules when it comes to hierarchy as well, more specific takes precedence and so on so keep it in mind.
Related
I have a requirement when I should display HTML elements next to each other,
I am using angularjs, when I use ng-bind-html in a HTML tag the next element to it is always appearing in a new line. I want to make the elements appear next to each other.
Could anyone help me in fixing the issue? I've created a sample plunk https://plnkr.co/edit/Bq3x4hw5L1MNkLoJW8LQ?p=preview
I am expecting the result to be
I am an HTMLstring with links! and other stuff Sai
But its always producing
I am an HTMLstring with links! and other stuff
Sai
This is a CSS issue, just modify the code as below
<div style="display:flex;">
<p ng-bind-html="myHTML" style="margin: 0;"></p> <span>Sai</span>
</div>
P element is basically a block element and span an inline element, so when you place span outside p, it will always start on a new line. Just bind your html to an inline element, both will come in same line.
<p><span ng-bind-html="myHTML"></span> <span> Sai</span></p>
I found out recently that HTML does a weird thing with whitespace where div tags that open and close on different lines each have a margin of about 4px between them.
You can fix this by putting the closing div tag and the trailing opening div tag on the same line, but otherwise the best way to rectify this seems to be over-riding it by giving them absolute positioning and a negative margin.
Can I accomplish the former with HAML? Preferably not the whole div tag and everything within it, just the ending and opening tags.
The only option that I know (I mean is on their doc) that gives you some control of the output format is the switcher -t which can be ugly or the default intended. ugly will omit indentation so I guess no luck there.
Meaning for this this haml example:
.container
.wrapper
.something-esle
a neat text here
.something-esle
a neat text here
will render with the command haml -t ugly test.haml test.html
into:
<div class='container'>
<div class='wrapper'>
<div class='something-esle'>
a neat text here
</div>
<div class='something-esle'>
a neat text here
</div>
</div>
</div>
where haml test.haml test.html puts out :
<div class='container'>
<div class='wrapper'>
<div class='something-esle'>
a neat text here
</div>
<div class='something-esle'>
a neat text here
</div>
</div>
</div>
What are you experiencing, is a well known problem with the display:inline or display:inline-block style, where is normal to have that space since the element is treated like a char. There are a lot of hacks for it like set the font size to 0px on the container and restore it on the block or use float instead.
Follow these stacks for more details on the subject:
How to remove the space between inline-block elements?
A Space between Inline-Block List Items
I think I cannot do that one in CSS, but wanted to see whether someone would have such a solution...
I have a div with the page content, a div which can be in several different location in the HTML, and a set of paragraphs. The CSS would have to place the second div between two paragraphs.
There is a sample HTML:
<div id="to-be-placed">Move Me</div>
<div id="content">
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
</div>
Say we want to place the "#to-be-placed" div after the 3rd paragraph, is there a way to do that in CSS? I can reference the 3rd paragraph as so:
content.p:nth-child(3)
But I really don't see a way to tell CSS to move my DIV to that location...
Note: the #to-be-placed div could be inside the #content div, at the beginning or at the end.
P.S. Please, don't come up with hard coded sizes and positions. That won't work.
P.S. Just in case you get all excited about jQuery. I know how to do it with jQuery. So no, I don't need you to give me such an answer. (see How to add div tag in-between two paragraphs when wrapped inside main div using jquery for those who wonder.)
This cannot be done using CSS, as CSS does not provide any mechanism for moving elements in HTML, only for styling existing elements and adding new content through the use of pseudoelements. The best you're going to get is a solution that uses JavaScript or jQuery.
If you only want to add styled text content, you can add that using the ::after pseudo-element in CSS, but it does not support HTML, only plain text:
p:nth-child(2)::after {
content: "- Added content";
}
<div id="content">
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
</div>
You can't do that exactly, but a possible workaround would be to define the div as the ::after element on the 3rd p element. This technically puts the div inside the p, but it might do what you're looking for.
p:nth-child(3)::after {
content: "Move Me";
display: block;
}
Here's a fiddle: https://jsfiddle.net/me5su05f/1/
Short answer: No you cannot do that. CSS (Cascading Style Sheet) is designed for styling. It is not designed to be used to manipulate DOM elements. JavaScript on the other hand is built for doing that. So if you happen to be wanting to use CSS for manipulating your DOM then you might want to re-think your approach to the solution.
I am coding an MVC 5 view, and I am after some text colored green, the same as the class="text-success" Bootstrap class on the same line as normal text.
Here is what I have coded currently:
Test Text: <p class="text-success">Yes</p>
This however, displays the green "Yes" on the next line down rather than on the same line as the "Test Text:".
How can I display the text on one line?
That should do the trick :
<p>Test Text: <span class="text-success">Yes</span></p>
Explanation :
<p> is a block element, hence displaying in its block taking the whole width (if not specified otherwise in the CSS), with a new line before and after.
<span> is an inline element, taking only the width that's needed and not forcing any new line.
The difference between inline and block is a very important thing in HTML/CSS. You will also discover other values for the css display property, a very usefull one being inline-block that puts together some benefits of block and some others from inline.
You can use CSS to change the way <p> is displayed. The normal mode is block; changing to inline will prevent the line break.
p.text-success {
display: inline;
}
Test Text:
<p class="text-success">Yes</p>
The fix of this issue is simple: just use <span> instead of <p>:
Test Text: <span class="text-success">Yes</span>
The reason behind this is, that the the tag <p> is defined as paragraph and causes a line break automatically (if definition was not changed through CSS).
The <span> tag instead is a simple text span and does not cause a line break.
Additionally you can also add <nobr> around it, to force to browser to not make a line break (no br stands for no line break):
<nobr>Test Text: <span class="text-success">Yes</span></nobr>
In HTML, how do I prevent this "linebreak" when using the <div> tag?
Example:
<div class="menu"><br><br>menu</div>
<div class="apple"><br><br>apple</div>
Visual example:
How do I make it so that apple appears directly to the right of menu? I can't seem to do that successfully; apple always appears to be below menu
NOTE: Pretend that 'apple' is inside its own invincible maroon box.
When using <span> instead of <div>, you need to get rid of the line breaks (<br>).
If using inline CSS (which is the style attribute), you may want to add style = "float:left;" to the first div only. This way:
<div class="menu" style="float:left;"><br><br>menu</div>
<div class="apple"><br><br>apple</div>
It sounds like you have two block elements that you would like to display side by side?
Have you tried using the "display: inline-block;" property in your css yet?
You can change your CSS to include the following;
div.menu, div.apple {
float:left;
display:inline-block;
}
You might also need to set the width of each to less than 50%.
<div class="menu"><br><br>menu<span class="youtube"><br><br>youtube</div>