📄 demo.php
字号:
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"><html><head><meta http-equiv=content-type content="text/html; charset=utf-8"><title> onunderflow </title><script language="JavaScript" src="moz-text-overflow.js"></script><style>body{font-family:Verdana;}p{color:#FF0099;font-size:0.78em;margin:0.5em;}/*Sample 1*/.textOverflow{width:50%;border:solid 1px #222222;} .textOverflow div{ height:1.5em; position:relative; font-size:0.78em; width:95%; border-bottom:solid 1px #aaaaaa; padding:2px;white-space:nowrap; overflow:hidden; margin:2px 0; text-overflow:ellipsis; -moz-binding:url("moz-text-overflow.xml#XBLDocument");/*Extensible Biding Language for Firefox*/}.textOverflow div ins{position:absolute;right:0;bottom:-0.2em;width:1.5em;text-align:right;height:2em;min-width:41px;text-decoration:none;background:url(text-fade.png) repeat-y;display:none;}.textOverflow div._textUnderflow{overflow:auto}.textOverflow div._textUnderflow ins{display:none;}.textOverflow div._textOverflow{overflow:hidden;}.textOverflow div._textOverflow ins{display:block;}table.textOverflow{table-layout:fixed;}</style></head><body><h1></h1><h2>Make <strong>Text-Overflow</strong> work on both IE and Firefox</h2><p>If the text inside each line exceed the width of each line, then you will see "..." (ellipsis) shows up at the end of each line.</p><p>Try to resize the window or change the font size to see if "..." (ellipsis) will show up or disappear.</p><h3>Demo - Listing</h3><ol class="textOverflow"> <li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultricies, en End!</div></li> <li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultricies End!</div></li> <li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultri End!</div></li> <li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit u End!</div></li> <li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in bland End!</div></li> <li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in b End!</div></li> <li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede End!</div></li> <li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, p End!</div></li> <li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverr End!</div></li> <li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean vi End!</div></li> <li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenea End!</div></li> <li><div>sit amet, consectetuer adipiscing elit. In mollis. A End!</div></li> <li><div>sit amet, consectetuer adipiscing elit. In molli End!</div></li> <li><div>sit amet, consectetuer adipiscing elit. In m End!</div></li> <li><div>sit amet, consectetuer adipiscing elit. End!</div></li> <li><div>sit amet, consectetuer adipiscing el End!</div></li> <li><div>sit amet, consectetuer adipiscin End!</div></li> <li><div>sit amet, consectetuer adipi End!</div></li> <li><div>sit amet, consectetuer a End!</div></li> <li><div>sit amet, consectetu End!</div></li> <li><div>sit amet, consec End!</div></li> <li><div>sit amet, co End!</div></li> <li><div>sit amet End!</div></li> <li><div>sit End!</div></li> <li><div> End!</div></li></ol><h3>Demo - DataGrid</h3><table class="textOverflow"> <tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultricies, en End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultricies End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultri End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit u End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in bland End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in b End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, p End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverr End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean vi End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenea End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. A End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipiscing elit. In molli End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipiscing elit. In m End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipiscing elit. End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipiscing el End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipiscin End!</div></td></tr> <tr><td><div>sit amet, consectetuer adipi End!</div></td></tr> <tr><td><div>sit amet, consectetuer a End!</div></td></tr> <tr><td><div>sit amet, consectetu End!</div></td></tr> <tr><td><div>sit amet, consec End!</div></td></tr> <tr><td><div>sit amet, co End!</div></td></tr> <tr><td><div>sit amet End!</div></td></tr> <tr><td><div>sit End!</div></td></tr> <tr><td><div> End!</div></td></tr></table</body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -