Css achieve with the text automatically hide
Not-for-line <NOBR> </ NOBR> (not a newline)
Overflow
Version: CSS2 compatibility: + IE4 + NS6 inheritance:
Syntax:
Overflow: visible | auto | hidden | scroll
Parameters:
Visible: Not content shear not add scrolling. If the explicit statement that the default value, the targets will be cut to contain the object or window frame size. And clip attribute settings Failure
Auto: This is the body textarea objects and the default value. Shear when necessary and add the contents of the rolling
Hidden: Size does not show the contents of more than objects
Scroll: always show rolling,
Description:
When retrieved or set targets over the content of its width and height specified how to manage content.
Set targets for textarea hide their hidden values will be rolling.
For the table, if table-layout attribute set to fixed, td support object hidden with the default value for the overflow attribute. If as a hidden, or auto scroll, then the content beyond td size will be cut. If as a visible, the text will lead to additional overflow to the right or left (depending on direction attribute may be) cells.
Since IE5, this property available on the platform in the MAC.
Of the corresponding script for overflow.
Example:
Body (overflow: hidden;)
Div (overflow: scroll; height: 100px; width: 100px;)
Text-overflow version: IE6 + proprietary attribute inheritance:
Syntax:
Text-overflow: clip | ellipsis
Parameters:
Clip: do not show marked (…), but omitted simple Crop
Ellipsis: When the object of text overflow, indicate omitted markers Sort
Description:
Search settings or use of any markings Sort marked an omission in the text of the object overflow.
For the script of the corresponding textOverflow. Please refer to my other programs to prepare.
Example:
Div (text-overflow: clip;)
Code:
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
"Http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta Http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> Untitled document </ title>
</ Head>
<body>
<table Width="100%" border="1" cellspacing="2" cellpadding="2" style="table-layout:fixed">
<tr>
<td Width="10%"> s </ td>
<td> <div STYLE="width:60%; overflow:hidden;text-overflow:ellipsis"> <nobr> asdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdata goes here </ nobr> </ div> </ td>
<td Width="30%"> </ td>
</ Tr>
<tr>
<td> D </ td>
<td> <div STYLE="width:60%; overflow:hidden;text-overflow:ellipsis"> <nobr> asdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdata goes here </ nobr> </ div> </ td>
<td> </ Td>
</ Tr>
</ Table>
</ Body>
</ Html>
Tags: Text Alignment, Text Decoration, Text Indentation, Text Transformation
Leave a Reply