s

Home > css > css wrap text in pre tag

css wrap text in pre tag edit button Edit

author
Murugan Andezuthu Dharmaratnam | calendar 10 September 2020 | 2591

How to wrap text in pre tag in HTML?. The <pre> tag defines preformatted text.. Pre tag would not warp the text by default in HTML, to warp text in a pre tag you should use CSS.

CSS for Cross-browser wrapping

pre
{
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, post millennium */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5  */
}

Sample CODE HTML & CSS

<html>
<body>
    <style>
        pre
        {
            white-space: pre-wrap; /* CSS3 */
            white-space: -moz-pre-wrap; /* Mozilla, post millennium */
            white-space: -pre-wrap; /* Opera 4-6 */
            white-space: -o-pre-wrap; /* Opera 7 */
            word-wrap: break-word; /* Internet Explorer 5.5  */
        }  
    </style>
    <pre>
This is a very long text. This text will be wrapped because of the css applied to the pre element.This is a very long text. This text will be wrapped because of the css applied to the pre element. Lets make this text a little bit longer by adding this line again and again. Lets make this text a little bit longer by adding this line again and again.Lets make this text a little bit longer by adding this line again and again.  
    </pre>
</body>
</html>