HTML Tutorials - Herong's Tutorial Examples - v2.30, by Herong Yang
Text Paragraph Block Size and Overflow
This section provides a tutorial example on the display size of a text paragraph block. 'overflow: scroll' CSS style can be used to manage text overflow in both directions.
When you include a paragraph of text in your HTML document, the first question you may ask is "How big is my paragraph block will look like on my viewer's screen?".
The answer depends on 2 factors:
1. Size of The Parent Block - Web pages are displayed an hierarchical tree of blocks. Every block is displayed inside a parent block. The root block is defined by the "body" element of the HTML document. If the parent block has a fixed size, then its child blocks are limited to this size. Otherwise, child block sizes are not impacted.
2. Size of The Block Itself - A paragraph block may have its fixed with CSS styles. Otherwise, it will expand horizontally and wrapped around to grow vertically.
If a text paragraph block is limited to a fixed size, there are 3 possible behaviors you can manage with CSS styles:
Here is an HTML document that demonstrate those 3 possible behaviors of paragraph blocks with fixed sizes.
<!DOCTYPE html> <!-- Paragraph-Block-Size.html - Copyright (c) 2014 HerongYang.com. All Rights Reserved. --> <html><head> <title>Paragraph Block Size</title> </head><body> <h4>Test on Paragraph Block Size</h4> <table border="1"> <tr> <th>Under Flow</th><th>Scrollable Over Flow</th><th>Over Flow</th> </tr> <tr> <td><p style="width: 150px; height: 200px; border: 1px #ff0000 solid;"> Fox jumps over dog. </p></td> <td><p style="width: 150px; min-height: 200px; max-height: 200px; overflow: scroll; border: 1px #ff0000 solid;"> Thequickbrownfoxjumpsoverthelazydog. Thequickbrownfoxjumpsoverthelazydog. <script> for (i=0; i<6; i++) { document.write('The quick brown fox jumps over the lazy dog. '); } </script> </p></td> <td><p style="width: 150px; min-height: 200px; max-height: 200px; border: 1px #ff0000 solid;"> Thequickbrownfoxjumpsoverthelazydog. Thequickbrownfoxjumpsoverthelazydog. <script> for (i=0; i<6; i++) { document.write('The quick brown fox jumps over the lazy dog. '); } </script> </p></td> </tr> </table> </body></html>
The picture below shows you how the above HTML document is displayed in a Web browser.
Table of Contents
Introduction of HTML5 Features
HTML Document Structure and Content
HTML Document and Elements Syntax
►Displayed and Printed HTML Documents
Differences between Displayed and Printed HTML Documents
Default Font Family and Font Size
Printed Width of HTML Document
Printed Height of HTML Document
►Text Paragraph Block Size and Overflow
Pagination Control of HTML Documents
Responsive Design of Web Pages