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) 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.

Text Paragraph Block Size and Overflow
Text Paragraph Block Size and Overflow

Table of Contents

 About This Book

 Introduction of HTML

 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

 Display Size of Image

 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

 References

 Full Version in PDF/EPUB