wrap in css and html

Posted under CSS3 Course On By mohammed.mutawe

wrap in css

Well , in previous lesson we explained how to use overflow for text if were out of tag bound , now we will talk about how to make auto wrap for your text inside tag.

This method is not the same as before, it is the most used in most sites due to the need for the presence of borders in many texts and this is what css wrap adopts, which is based on drawing the automatic borders of the text that we want to drop at the bottom automatically.

 

Definition

HTML tag
{
    background-color:%color%;
    padding:%val%;
    border:%val% type of border %color%;
    width:%val%;

}

This is the general formula known when creating an HTML tag and working to automatically go down to a new line within the tag limits , which contains:

  • background : easily define your color for HTML tag.
  • padding : spaces between text and HTML tag bounds from outside.
  • border type: which contains size of border line and type of border such as solid or dotted line or others.
  • HTML tag width : Which size of tag in our page.

 

Benefits

Benefits of using CSS wrap are many for HTML templates  , include :

  • Add whatever we want inside the text without taking into account the width of the tag.
  • easy to use , Frequently used.

And now we have clarified some characteristics of css wrap in the use of texts and we hope that we have given you the idea well.

 

Example

Please, to understand wrap CSS well, copy the following codes into a text file and do not forget to change its extension to .html and then run it in your browser.

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Text Overflow</title>


        <style>
        div
            {
                background-color:#D9D9D9;
                padding:10px;
                border:2px solid #CCC;
                width:300px;
                white-space:normal;

            }

        </style>
    </head>

    <body>
        <div>This is Tajersys Website This is Tajersys Website School This is Tajersys Website School</div>
        <p>file:///   C:/Users/       mutaSYS/Desktop/CSS/part9%20Word%20Wrap,%20White%20Space/Text%20overflow.html</p>
    </body>

</html>

 

 

 

Leave a comment

Your email address will not be published. Required fields are marked *