I can't understand why there is an empty space on the top. I haven't applied any styles to it
<pre>
<div class="codeBlock">
<ol>
<li>(function() {</li>
<li>function $codeBlock() {</li>
<li>return {};</li>
</li>}</li>
</ol>
</div>
</pre>
pre has white-space: pre default style. From W3Schrools about white-space: pre:
Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML
Of course you can move pre's content to one line but not sure this will flexible and maintainable.
So you can change white-space CSS property to normal or nowrap (depending on need of wrapping):
pre {
white-space: nowrap;
}
.codeBlock ol, li {
margin: 0;
}
<pre>
<div class="codeBlock">
<ol>
<li>(function() {</li>
<li>function $codeBlock() {</li>
<li>return {};</li>
</li>}</li>
</ol>
</div>
</pre>
If you want to return white-space behaviour for ol you can also set
.codeBlock ol { white-space: pre }
Ok so heres the thing. pre takes every character and interpret it in it's display, that mean it will litterally "show" a carriage return. Try to remove the spaces. Lets say you you twig, apply {% spaceless %}. If you use something else, use the proper function, but if you do it manually, do like i just did in the example below :) Cheers
<pre><div class="codeBlock"><ol><li>(function() {</li><li>function $codeBlock() {</li><li>return {};</li><li>}</li></ol></div></pre>
Related
I have text coming back from the server containing carriage return (enter). I asked some people what to do to display this text on multiple lines, and they advised me to use the white-space: pre.
Is there any other way to display the text on multiple lines without white-space: pre? Or any way to make pre act like a paragraph but with multiple lines without having the extra padding?
Here's what I have:
.gallery-Gcontainer {
margin: 0 !important;
padding: 0;
}
#genericpartTitle,
.content {
padding-left: 20px;
}
.content .sidebar,
.content section {
display: inline-block;
width: 30%;
border: none;
vertical-align: top;
}
.content .sidebar img {
width: 200px;
}
<div class="gallery-Gcontainer">
<div class="header-area">
<h3 id="genericpartTitle">my page</h3>
<hr>
</div>
<div class="content">
<div class="sidebar">
<img class="img-sidebar" src="https://static.pexels.com/photos/30738/pexels-photo-30738.jpg" />
</div>
<section>
<h5 class="item-title">Welcome to my first page</h5>
<p style="white-space: pre" class="description">
Hello, anything will go here, text will come from the server like this, and I need to display it on multiple lines.
</p>
</section>
</div>
</div>
Update:
Putting: white-space: pre-line as suggested in the answers, solved the padding left issue, but still there's a big space in padding-top.
Instead of white-space: pre use white-space: pre-line.
From MDN:
The white-space
property
The white-space property is used to describe how whitespace inside
the element is handled.
normal Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as
necessary to fill line boxes.
nowrap Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.
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.
pre-line Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
Also, the padding-top issue you mention isn't really padding. In looking at your code there appears to be at least one line break at the start of the line.
If possible then use below javascript code for CSS .
var ss = " Hello`, anything will go here, text will come from the server like this, and I need to display it on multiple lines.";
document.getElementById('test').innerHTML = ss.replace(/\n/g, '<br/>');
or
document.getElementById('test').innerHTML = ss.replace(/\n/g, '<br>\n');
<p id="test"> </p>
use "display:block" as your css styling. This should break onto new line.
<p style="display: block" class="description">
It seems that leading whitespace inside a <q> element is always preserved (albeit normalized to a single space), while this isn't the case for most inline elements. For example, the following code (jsFiddle):
<br> a <q>test</q> b <a href=#>test</a> c
<br> a <q> test</q> b <a href=#> test</a> c
<br> a <q>test </q> b <a href=#>test </a> c
<br> a <q> test </q> b <a href=#> test </a> c
Renders like this in all modern browsers I've tested (Chrome, FF, and Edge):
In the second and fourth line, the <q> is rendered with initial whitespace, while the <a> is not. Why is this?
EDIT: Adding the following CSS to the fiddle above:
a::before, a::after {
content: '"';
}
Makes them render identically. So it seems to have something to do with the CSS ::before selector.
According to Chrome's docs on default styles for HTML elements, the default style for the <q> element (quote) is:
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
As you noticed, if you apply the same style to the <a> element (anchor), you get the same results:
body {
font-size: 200%;
}
q {
background-color: #AAF;
}
a {
background-color: #FAA;
}
a::before {
content: open-quote;
}
a::after {
content: close-quote;
}
<br> a <q>test</q> b <a href=#>test</a> c
<br> a <q> test</q> b <a href=#> test</a> c
<br> a <q>test </q> b <a href=#>test </a> c
<br> a <q> test </q> b <a href=#> test </a> c
The key to understand this lies on the explanation of what are ::before and ::after. According to MDN, they create a pseudo-element that is the first (for ::before) or last (for ::after) child of the element matched. So you can imagine that an inline element with a quote inside was added as the first child of each <q>.
For example:
<br> a <span><span>"</span> b</span>
Shows one space before b, while:
<br> a <span> b</span>
Does not show the space before b.
You can see it in action here:
body {
font-size: 200%;
}
q {
background-color: #AAF;
}
a, span {
background-color: #FAA;
}
<br> a <q>test</q> b <a href=#>test</a> c
<br> a <q> test</q> b <a href=#> test</a> c
<br> a <q>test </q> b <a href=#>test </a> c
<br> a <q> test </q> b <a href=#> test </a> c
<br> a <span><span>"</span> a</span>
<br> a <span> a</span>
The behavior of normal white-space css rule, which is applied by default here, is to collapse multiple whitespace to one space. When you add content with before and after it's not multiple whitespace anymore, hence it doesn't collapse.
Note that it doesn't have anything to do with leading or trailing spaces, or inline or not, or the q element. All whitespace behave this way except if you change the white-space rule.
You can see the result if you change your CSS to:
body {
white-space: pre;
}
https://jsfiddle.net/zxvsehs6/
See: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
This is mainly due to the fact that the < q > tag has been designed to do that specific function: quote a piece of text. If that piece of text has white space, that space would be displayed. The quote is meant to "copy" a piece of text, hence being a quote. All other tags don't have white space because they are the developer's input, so that developer controls where they want space to be shown. In a < q > tag on the other hand, the contents of the tag are displayed exactly as typed, to actually "quote" a section of text.
In the end, it's down to how the developers of HTML chose to create the tag. The above paragraph is simply reasoning of their choice.
I could not get the white-space to be removed but what you can do is deduce the amount of white-space simply by adding a negative margin on the pseudo elements of the element you are trying to target.
Take for example this simple paragraph of text. I found the solution of adding a negative margin offset best worked for me:
html:
<p>This is my paragraph of text to demonstrate how this will work for you too!</p>
css:
<style>
p {
font-size: 1.5rem;
font-family: verdana;
}
//Pseudo element for the opening quote
p::before {
content: open-quote;
margin-right: -5px;
}
//Pseudo element for the closing quote
p::after {
content: close-quote;
margin-left: -10px;
}
</style>
Note: The amount of margin you will require for the before and after pseudo elements is likely to vary, for example, you may find you need increase/decrease the margin on one side more than you do on the other as I found was the case for me, but this will work. Font-sizes and styles etc... will also add to the required negative margin you will need to set, bearing in mind this does not actually remove the white-space completely, but rather, just decreases it to a minimal ideal amount to suit your context. Have a play around with negative margin values I have added here to see how it works... it works and I know it is more of a hack than a proper solution... it just does not seem possible to remove the white-space added by default on block quote elements making it a bit of a tedious process to set the ideal negative margin to best suit any context.
Why would
<div id='dD' class='cs'>
<p class='c cB'>
<span>X</span>
<span>X</span>
</p>
</div>
display like this
in Chrome, Firefox, Opera, Safari
but this
<div id='dD' class='cs'>
<p class='c cB'>
<span>X</span><span>X</span>
</p>
</div>
displays like this
I wouldn't expect a whitespace newline to have any impact on the way HTML is rendered.
I can rectify this by applying
display: block;
or
display: inline-block;
to the spans (not sure which is the better choice)
but don't understand why the browsers render differently because of a whitespace newline.
Apparently, the default behavior is to treat new lines as spaces.
That one space was enough to wrap the text beyond the width and render on separate lines.
Removing the newline removed the space so the Xs get rendered on the same line.
Adding
.c span {
display: block;
}
forces each X to be treated as a block and rendered on separate lines, which is what I want.
Try this
.cB {
word-wrap: break-word;
}
Is it OK to use "div" tag inside "code" tag? I am using NetBeans 8.0.1 for writing some html pages. And at some point I had to use "div" inside "code". You can see a part of my code in http://jsfiddle.net/125ypcum/
NetBeans gives me the following error
Element "div" not allowed as child of element "code" in this context.
The result is what I want however the error troubles me. Is it a problem in anyway? Is there a way to get the same result without an error?
The code from jsfiddle:
<div class="codeDiv">
<pre>
<code class="black">stat<sub>0</sub>;
<div class="back-red codeBoxMargin">if (expr<sub>1</sub>)
<div class="back-green codeBoxMargin"> if (expr<sub>2</sub>)
{
stat<sub>1</sub>;
stat<sub>2</sub>;
}
else
<div class="back-blue codeBoxMargin"> if (expr<sub>3</sub>)
{
stat<sub>4</sub>;
stat<sub>5</sub>;
}
else
stat<sub>6</sub>;
</div></div>else
stat<sub>7</sub>;
</div>stat<sub>8</sub>;</code></pre>
</div>
code is an inline element, while div is a block element. Block elements must not appear inside inline elements.
If you want to have a div inside a preformatted container, use pre. Note, however, that pre by default shows line-breaks as-is. Or use a span element inside code (as proposed by Lowe Bäckström in a comment).
If you want to mark up your code with the code element, but you want a particular presentation style, use elements like div to set the arrangement of the elements, and then <code> to mark up the code itself. For your html, this would be:
<div class="codeDiv black">
<code>stat<sub>0</sub>;
</code>
<div class="back-red codeBoxMargin">
<code>if (expr<sub>1</sub>)
</code>
<div class="back-green codeBoxMargin">
<code> if (expr<sub>2</sub>)
{
stat<sub>1</sub>;
stat<sub>2</sub>;
}
else
</code>
<div class="back-blue codeBoxMargin">
<code> if (expr<sub>3</sub>)
{
stat<sub>4</sub>;
stat<sub>5</sub>;
}
else
stat<sub>6</sub>;
</code></div></div><code>else
stat<sub>7</sub>;
</code>
</div><code>stat<sub>8</sub>;</code>
</div>
NB: I have removed the <pre> tags!
You can then set the whitespace to be preserved using the css declaration code { white-space: pre; } and set your font to an appropriate monospace font.
code {
white-space: pre;
font: 1em/1.5 Menlo, Consolas, 'DejaVu Sans Mono', Monaco, monospace; /* or whatever */
}
Here's the JSFiddle.
<code> is an inline element meant for marking up spans of text within block-level elements like <div>, <p>, and so on. While most browsers will happily render your original html, it would be syntactically incorrect.
I am creating my webpage, using HTML5 (but possibly what I am asking has nothing to do with 5 spicificaly).
I am trying to have a indent there, like,
<ol>
<li> <fontspec from css>title</fontspec from css> detail about title
</li>
<li>..</li>
...
</ol>
What I want is the "detail about title" should appear in the next line (I am using br for that), and will be intended; as
1. title
detail about title
I can have the effect using space   , but then I have to remember all the number of space I am entering, for all the page. Is there any tag in html that will do these things for me?
EDIT:
Thanks for your reply, indent is working, but as normal to <p>, this is not writing to the next line, but taking one line extra gap. Its now coming as:
1. title
detail about title
EDIT2
Here is the snippet from actual page:
In Html:
<ol>
<li>
<item>title</item><p class="indent">details about title</p>
</li>
</ol>
in css:
item{
font-size :120%;
color :#096cdb;
font-weight : bold;
}
.indent{
margin-left: 20px;
}
*EDIT as jukka's comment *
I have realized theat item is not html tag. w3c validator is giving error, though chrome is rendering it as my intention. I tried to put h4 instead of item, but it is also taking space of next line. So, what is the way out?
EDIT:
solved the job.
I have defined in css:
dt.item{
font-size :120%;
color :#096cdb;
font-weight : bold;
}
and then did:
<li>
<dl>
<dt class="item">title</dt>
<dd>details about title</dd>
</dl>
</li>
This has the output I am looking for, and is also validated by w3c.
There is. You could use definition list;
<ol>
<li>
<dl>
<dt><fontspec from css>title</fontspec from css></dt>
<dd>detail about title</dd>
<dl>
</li>
<li>..</li>
</ol>
Assuming that the real markup has something like
<li> <span class=title>title</span> detail about title</li>
and, for definiteness, that you wish to apply the same styling principle to all li elements, you can make the span element rendered as a block (causing line break after it) and set a negative first-line indent (text-indent property) and the corresponding positive left padding on the li elements. This means that in li elements, any lines except the first one will be indented by the amount you set. In the following example, the amount equals the size of the font:
<style>
.title { display: block; }
li { text-indent: -1em; padding-left: 1em; }
</style>
First, let's give it a class.
<p class="indent">detail about title</p>
Afterwards, we'll use CSS to set a margin to the left of the text.
.indent {
margin-left: 20px;
}
That should give you an indent. Adjust accordingly :)
Note that by using a paragraph element, there's no need for a line break anymore.