Free Web Development Online Tutorials, Learn to Code
Learn HTML coding, Pre tag in Html, pre tag allow auto wrap text, pre tag styling, Tutorial for Beginners

Html Pre tag attributes example

html pre attributes

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 example

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.

html pre auto wrap

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

pre tag is used for displaying code blocks so it preserves the spaces and line breaks, but in some situation you may need to wrap text, here is the code, if you want to auto-wrap the text inside pre element

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