create css overflow

Posted under CSS3 Course On By mohammed.mutawe

CSS overflow

Overflow of text on borders, which is called overflow, and this feature in CSS is available and we can use it to hide some parts of the text to format the page well, and it depends on specifying a specific size of the tag to be applied to overflow, then the remaining long texts in the tag are hidden.

 

Definition

tag
{
    width:%value%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

tag:hover{
    overflow:visible;
}

Which contains the hovering property of css, which in turn activates the text overflow when the mouse pointer is on it, and overflow css depends on two main factors:

  • Tag size.
  • Apply masking
  • Invisibility appears at Hover.

 

Benefits

Dealing with multiple tags in html will decrease spaces in our HTML page , and CSS overflow were the best solution to hide some out text borders from our page.

we will mention some benefits of using overflow:

  • easy to use.
  • compatibility by creating responsive HTML tags.
  • make good use of page resources.
  • encapsulating the texts.

 

Example

Please, to understand CSS overflow 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>Word Wrap, White Space</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <style>
    div
{
    background-color:#EEE;
    padding:10px;
    border:1px solid #CCC;
    width:300px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

div:hover{
    overflow:visible;
}
    </style>

    <body>
        <div>
            <h3>Without break The word</h3>
            <p>file:///C:/Users/mutaSYS/Desktop/CSS/part8%20Text%20Overflow/Word%20Wrap,%20White%20Space.html</p>
        </div>
    </body>

</html>

 

 

 

 

Leave a comment

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