- Div
- IE
- White-space: normal (standard)
Example:
# Wrapdiv {white-space: normal; width: 100px ;}
<Div id = "wrapdiv"> timeislifetimeislifetimeislifetimeislifetimeislifetimeislifetimeislife </div>
- Word-break: Break-All (got from word)
Example:
# Wrapdiv {
Word-break: Break-all; width: 100px ;}
<Div id = "wrapdiv"> timeislifetimeislifetimeislifetimeislifetimeislifetimeislifetimeislife </div>
- Firefox
There is no better solution, the solution is similar to IE, just add a overflow: hidden or overflow: auto. For instance:
-
# Wrapdiv {white-space: normal; width: 100px; overflow: hidden
}
<Div id = "wrapdiv"> timeislifetimeislifetimeislifetimeislifetimeislifetimeislifetimeislife </div>
-
# Wrapdiv {
Word-break: Break-all; width: 100px; overflow: hidden
}
<Div id = "wrapdiv"> timeislifetimeislifetimeislifetimeislifetimeislifetimeislifetimeislife </div>
- Table
- IE: Table-layout: Fixed + nowrap (optional)
- Example1:
<Style type = "text/CSS">
. Tableautowrap1
{
Table-layout: fixed;
}
</Style>
<Table class = "tableautowrap1" width = "100">
<Tr> <TD>
</TD> timeislifetimeislifetimeislife are you sure </tr>
</Table>
- Example2:
<Style type = "text/CSS">
. Tableautowrap1
{
Table-layout: fixed;
}
</Style>
<Table class = "tableautowrap1" width = "100">
<Tr> <TD>
</TD nowrap> timeislifetimeis lifetimeis lifeareyousure </tr>
</Table>
- Example3:
<Style type = "text/CSS">
. Tableautowrap1
{
Table-layout: fixed;
}
</Style>
<Body>
<Table class = "tableautowrap1" width = "100">
<Tr> <TD>
</TD nowrap width = "50%"> timeislife timeis lifetimeis lifeareyousure <TD> </tr>
</Table>
- Firefox: Table-layout: Fixed + nowrap (optional) + Div
So far, there is no good solution for fixfox, the only workaround is to hide the overflowed text, andTD'S width must use percentage instead of absolute width.
For example:
<Style>
. Tableautowrap {table-layout: Fixed}
. TD1 {overflow: hidden ;}
</Style>
<Table class = "tableautowrap" width = 80>
<Tr> <TD width = 25% class = "TD1" nowrap>
<Div> ttimeislifetimeislifet imeislifeimeislife </div>
</TD>
<TD class = "TD1" nowrap> <div> ttimeislifetimeislifet imeislifeimeislife </div> </TD>
</Tr>
</Table>
Note: All the foregoing solution will only be word-wrap (line-wrap) at the blank of a string of long characters, if you want to make the word-wrap occurs at every position where the length of the characters exceed the line width, you can use the following CSS element:
<Style type = "text/CSS">
. Textarea1
{
Overflow: hidden;
}
</Style>
<Textarea class = "textarea1" Cols = "10" rows = "4"> ccccccccccccccccccccccccccccc </textarea>