I want to make a website with lots and lots of paragraphs, but I'm wondering if there is a more efficient way of achieving the spacing in the code without having to go back and place <p> tags for every paragraph. I have a feeling that it is not just simply HTML and CSS to achieve this. I have tried the <pre>element but it is spacing out each line, not the paragraph itself.
Could anyone help steer me in the right direction of how to do this?
<p> is the correct way to make a paragraph. The HTML5 specification allows you to exclude the ending </p> tag but many browsers and blogging engines require it so I'd advise you to include it. A <br> tag can be used to make a generic line break but doesn't allow you to apply CSS styles to your paragraph, so don't use it for paragraphs.
If you just don't want to type out <p> every time, then what you want is an IDE or a rich-text editor that can output the html for you.
You could write your paragraphs in Markdown and then convert them to HTML. In Markdown, paragraphs are delimited by two line breaks, not with tags. (Stack Overflow uses Markdown for posts.)
Example:
This is one paragraph in Markdown.
This is a second paragraph. As you can see, no `<p></p>` tags are necessary.
You want use snippets? For fast codding you can use emmet. For example:
You can write p.class_name*4 and after that you will get
<p class="class_name"></p>
<p class="class_name"></p>
<p class="class_name"></p>
<p class="class_name"></p>
I hope i understand you correctly.
A solution could be writing a full properly p element and then just copy and paste it as much as you want and need.
To add space between each p element, use the br element which gives you space as it "breaks" up the rows.
Hope this helped you, happy programming!
If I understand you correctly, you have a long text that is divided to paragraphs, and you want to display it "correctly" in the browser.
Paragraph division in texts is usually achieved by a blank line between them.
So - you should parse the existing paragraphs from the text:
var paragraphs = text.match(/[^\r\n]+/g);
Add HTML paragraph formatting:
var paragraphsInHtml = paragraphs.map(function(paragraph) {
return "<p>" + paragraph + "</p>";
});
And reform the text:
var formattedText = paragraphsInHtml.join();
[code snippets are in javascript]
Related
The pre tag is used for defining block of preformatted text in order to preserve the tab, text space, line break e.t.c.
But I don't really know while this is not working for me. Am having excess WhiteSpace in all my blog posts.
I have provided a screenshot for view as well as a live url to see the effect of what am trying to explained.
I tried this:
.pre-blog{white-space:pre-line;white-space:-moz-pre-line;white-space:-pre-line;white-space:-o-pre-line;word-wrap:break-word;word-break:keep-all;line-height:1.5em; display:inline;margin:0}
But no luck with it cos it couldn't solve the issue.
Here is one of the blog posts that you can access and see what I am trying to explain.
Screenshot:
the whitespace you show in the screenshot is the space between li items. This is default styling applied for these html elements.
Easiest way to get rid of the space would be to apply display: flex and flex-direction: column to the parent, which is the ol element
You seem to be trying to put <div>s and other elements inside the <pre>. As far as I know that's not how <pre> works; it's only meant to contain plaintext that you want preformatted in a certain way as described here. It's usually used for displaying things like computer code that need all their indentation preserved.
Your screenshot and linked web page seem to be ordinary formatted text. I'm not sure what exactly you're trying to achieve, but <pre> is not the right way to do it; you'll have better luck with proper use of <p> and <br> tags and CSS styling with properties like margin, padding, and line-height. (Depending on your use-case, if you want to avoid manually typing tags, you might want to consider something like Markdown to automatically add the formatting tags for you).
I suggest you replace your <pre> with a <div>, and then post a different question regarding the whitespace if you're not able to figure it out yourself.
I have a HTML document with some distinct rows of text, is there some decided correct way to display them?
Example:
Here are
some lines
of text
Should I use the <p> tag for each row, or is there some other/better way to do it?
Examples:
<p>Here are</p>
<p>some lines</p>
<p>of text</p>
or
<p>
Here are <br>
some lines <br>
of text <br>
</p>
Or something completely different?
The CSS & other things isn't really relevant at the moment, I'm just wondering which is the "most correct" way to use.
if you have a string with new lines that you want to display for example in a div, you can use white-space: pre-wrap css style:
.multiline {
white-space: pre-wrap;
}
<div class="multiline">
A multiline text
for demo purpose
</div>
Or you can try this without tag wrapping each line:
<div style="white-space:pre">
Here are
some lines
of text
</div>
The correct way to do things is using things made for the things you need.
If you want a line break (enter), use <br>;
If you want to define a paragraph, use <p>.
According to this, the <br> element is used to insert a line break without starting a new paragraph. Hence you should prefer the second solution over the first.
w3schools comes with a marvelous article about style guides and coding conventions.
The spec makes it very clear that <br> should never be used unless the line breaks are actually part of the content forming a single unit of text.
As these are distinct rows of text, not a single unit that happens to contain line breaks, they need to be split into separate <p> elements.
There is no such thing in most correct way, at least according to the current specification of your needs. Yes, you can put them all in separate paragraphs, using the <p></p> tag or you can separate them via a <br> tag at every line. You can also use spans combined with the white-space CSS attribute, so you have a lot of options. To choose the best option for you, you will need to try them out and see what fits your requirements the best.
If you want to create a multiline paragraph that maintains the line seperation in your code without throwing s everywhere. Simply use the html tag.
I want to indent text with several spaces. So I need to put some spaces before the text in order to indent the text. Obviously doesn't work. Is there another symbol that would do that for me. I don't use CSS. Just in a plain html.
Thank you in advance.
This may not be the right way by some peoples standards, but following the OP:
Just in a plain html
&nbps; represents a single space, multiple of them will represent multiple spaces. Html Entities
<pre></pre> also works by telling HTML to allow formatting, preformatted text
Here is a jsfiddle
Use multiple times this combination in your html code:
<p>This will be spaced</p>
I have a HTML fragment, a list item of a long ordered list
<li>
<p class="nw">Abɩlɩsa ba tɔwɛ asɩn mʋ.</p>
<p class="English">The elders discussed the matter.</p>
</li>
How do the CSS rules look like to keep the two paragraphs in the list item together when printing the document? This means that they either appear together at the end of a page or then are moved together to the next page.
How do I keep the paragraph <p class="nw"> and the paragraph <p class="English"> together so that no page breaks occurs?
I use
.nw {page-break-after:avoid;}
but does not work. There are in fact page breaks between the nw and English paragraphs. This should not be the case as far as I understand the rule. To check it I use the print preview function of Firefox.
The answer How do I avoid a page break immediately after a header was helpful to find a solution. It refers to this bug in the Mozilla bug database.
A solution is the following.
li {
page-break-inside: avoid;
}
It works fine in Firefox.
There are multiple factors in play, first in importance: The user's printer.
There is no bullet-proof way of achieving what you want (Notice how a printer will even cut images in two if it decides to).
You could use a query indicating that if it is on print, that particular piece of text moves somewhere safe on your page, but this could cause other problems, like breaking the normal flow of your layout, etc.
I suggest you read this: http://davidwalsh.name/css-page-breaks
And this :
http://www.w3schools.com/cssref/pr_print_pageba.asp
Do you mean to have no break between the p class?
You can try grouping everything in one <p> element, and then identifying each class with a <span> element. For example,
<li>
<p>
<span class="nw">Abɩlɩsa ba tɔwɛ asɩn mʋ.</span>
<span class="English">The elders discussed the matter.</span>
</p>
</li>
Or if you are trying to just remove the space between the two <p> elements, you can look here - remove spaces between paragraphs
Is this what you meant?
According to your edit, you mean in terms of printing. This removes the paragraph space in a web document, but not while printing - Just a note to anyone searching this question in the future. R Lacorne seems to know the answer to the edited question.
I've often wondered about the proper use of a <br> line break. Seems that often they are incorrectly used for positioning or clearing content where CSS should instead be used.
W3schoools.org says to use <br> for blank lines, but not for creating or separating paragraphs. Looking over W3C HTML5 spec draft, it's a little clearer that the <br> would be used when content requires a line break such as lines of an address or blank lines in poetry, where intended by the author.
But I'm still interested in any further clarification or input anyone else may have. I often find myself opting not to use <br> tags but instead just styling elements with the desired clears, margins, paddings, etc. to create the space desired.
Not that it's supremely important, but here's the example that got me thinking about this where a popular ("authoritative") site used a <br> that I'm not sure is quite semantic. Here I would've just cleared the <a> from it's siblings via CSS:
<p>Lorem ipsum dolor sit amet, consectetur tempor laborum.</p>
<br>
more >>
To me, linebreaks should only be used inside paragraphs to indicate a new line. Adding line-breaks between paragraphs was used back in the day, when HTML looked like Chop Suey and the semantics of the HTML document looked like someone from preschool used Dreamweaver.
I personally rely on margins and padding for content separation, if I have to use a <br /> it means I've done something wrong. I think lines of an address are a perfect example of proper usage and I would stick to only those scenarios.
When the linebreak has semantic meaning within the unstyled document.
As someone said, poetry is a good example - conventionally, poetry is written with a linebreak between lines. As are addresses. It does not make sense to mark up a line of a poem or an address with a paragraph element, as these are better matches to the whole address or a stanza of the poem.
I agree with the specification, br should be used to create new lines of text within a paragraph. Semantically it makes, sense- a paragraph is a block of text with some top or bottom margin, whereas br specifies no margin, just a newline a the same line-height / line-spacing.
I use line breaks when customers may be able to edit things - it's easier if they just use the return key rather than get confused as to why spaces appear around certain elements on the page. This is almost always within text areas though, there's no reason to position anything else using <br />
The break tag (that when used alone should be <br />)
Must be used to break a line not for positioning, specially since you break only single lines.
It should have the same concept behind as you use the return key.
Hope it helps.
My opinion:
<br> would be used when content requires a
line break such as lines of an address
or blank lines in poetry, where
intended by the author.
(With that said, occasionally I use them for separating paragraphs, too) </ br>