I am creating a webpage for small primary school, where teachers can make a new posts for children parents. Webpage is very simple and I want to keep it simple, but there is a problem with text_area. In the view all written text is in one block, but I want to write some sentences in new line, how I can do this to keep it simple. I don't want to use a rich text editors for that problem.
in your view, use simple_format() That will display all text as it was typed, with spaces and line breaks.
an example from one of my apps:
<div id="report-body">
<%= simple_format(#report.body) %>
</div>
Use line feed and carriage return to put new line in text area (i.e)
For example:
<textarea>This is first line.
</textarea>
To add
in text area you need to implement some javascript to create keyboard shortcut.
I am not sure if I get your question correctly; I think it is a question about css. I think you just need to give this property:
white-space: pre;
in the css for textarea. Then, all white spaces, including carriage return, will appear as they are in the textarea.
wrap your text inside html tags for simplicity, you can also add a simple CSS and style your page as desired.
<p> This is your paragraph </p>
<h1> This is your heading </h1>
use a <br> tag to break line
Related
I'm just simply showing HTML from API in my app, but text is wrapping up in the middle of the word.
Example:
I just want to explain, what problem I'
m facing. Text should only wrap
in a space.
You could use
<nobr>I'm</nobr>
for the words containing the apostrophe.
Attention: The Tag is not standard HTML but supportet by many browsers.
Otherwise you could use use
<div style="white-space: break-spaces;"> just want to explain, what problem I'm facing. Text should only wrap in a space.</div>
That should be supported.
You can find further Information here (about <nobr>) and here (css editing).
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've read and visited a lot of websites, but none of them have provided me with a simple solution. What i want to know is what's the best way to add/skip a line in html? What I mostly use is two <br /> tags, but I know that there is a simpler solution to the problem. Is there a way to skip a line, using css, instead of doing this:
<p>Hello. <br /><br />This is a test</p>
You could simply use 2 separate paragraph (<p>) tags. For example:
<p>Hello.</p>
<p>This is a test</p>
Here's a demo.
Semantically, it depends on your purpose. Do whatever's best in the situation. Some examples.
If you literally need to skip a line, that is, have a empty line with nothing on it in your text, then by all means use two <br> elements.
This is one line of text<br>
This is also one line of text<br>
The next line happens to be empty<br>
<br>
And here is another line, not empty<br>
And so on.
However, if you want to create some blank space between two blocks of prose, then the two blocks should be paragraphs, as mentioned in the other answers.
And if the first part is a bunch of individual lines, but the second part is a piece of prose, only the second part needs to be a paragraph. No need to enclose the first part in <p> tags as well. Example:
Add the water to the recipe<br>
Add the salt<br>
<p>Note: stir thoroughly!</p>
If your intention is to actually separate two lines of text, to signify they don't belong together, you can use a <hr>. Make it invisible if you want.
This is some text
<hr style="opacity:0">
This is some unrelated text
If the next line happens to be an introduction to the later half of the text, change it into a <h4> (that is, a header at whatever level you require here).
The last line of the previous section
<h4>Introduction</h4>
The fist line of the next section
This works because headers also have margins built in.
Lastly, if you have an existing piece of html with your two blocks of text already in two HTML elements, you don't necessarily have to change the markup; all you need to do is set top and bottom margins for those elements in the CSS.
Suppose they are in <section>s:
<style>
section {margin:1em 0}
</style>
...
... The last line of the previous section</section>
<section>The fist line of the next section ...
You can surround the 'Hello' with div and add css of maring-bottom for example:
<p>
<div style='margin-bottom: 40px;'>Hello.</div>
This is a test
</p>
I think that using br tag is always a bad idea. Try using paragraphs, css padding, css margin, hr. Try avoiding br because it's not semantic and using the proper tag in your site "helps the search" engines to "understand your site"
<p>Hello. <br /> <br> This is a test</p>
Using block level elements would help. for example, p is a block level element which would give the line break.
so you can have the text in two paragraphs. and have the margin/padding set to the paragraph
using <br> is a bad approach.
Try using this where you want the blank space:
If you want multiple blank spaces, then repeat the code successively like this:
etc.
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]
say I have a piece of text like this
Hello I am some text Hello I am some
text Hello I am some text Hello I am
some text I do not wish to be broken
on new lines
Consider the above paragraph. I want for the bolded part to not be broken across a new line if possible. As in, I want it to break if it would require a scrollbar or something, but not break if it is possible to insert a page-break before or after that piece of text so that it can fit on one line.
How is this possible? I have tried things like page-break-inside and such, but it doesn't seem to do anything in firefox.
Use the white-space property:
Hello I am some text Hello I am some text Hello I am some text
Hello I am some text <span class="nobr">I do not wish to be
broken on new lines</span>
with:
span.nobr { white-space: nowrap; }
Adding this for completeness:
If you do not want to use CSS, you could use <nobr>text with space</nobr> - reference here
For pure text blocks, i believe not-anymore-depricated html formatting tags like <i>, <b>, <nobr> and alike are valid for use.
For content relating to the site structure use <em>, <strong> and <span class="">.
bootstrap 4 has a class="text-nowrap"
more here https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow