Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

HTML pre tag

The HTML <pre> tag is used to specify pre formatted content, means the content will be displayed as you are seeing in your code editor, anything written within <pre> ... </pre> tag is displayed with white space and line break.

HTML pre tag example with javascript code

Let's look at the example below
Assume you want to display following lines of JavaScript code as its appearing on your code editor with formatting.
<script>
function AreYouLearning() {
var result = confirm("Are you learning html tags");
if (result)
alert('Yes, Learning');
else
alert('Not Learning');
}
</script>

the above code is written within <pre> tag
Now let’s write the same code without pre tag to understand the difference
<script> function AreYouLearning() { var result = confirm("Are you learning html tags"); if (result) alert('Yes, Learning'); else alert('Not Learning'); } </script>

As you can see, there is now formatting, even no line breaks are maintained.
Hope you understand the use of <pre> tag in html.

How you wrap text in a <pre> tag in HTML

pre tag is used to display code blocks so it preserves the spaces and line breaks, but in some situation you may need to wrap text.
You can wrap text using some css style
<style>
pre {
overflow-x: auto;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
</style>
        



Comment
Name Email Website
Subscribe
 
HTML pre tag

Group Training