text-overflow樣式屬性值ellipsis的用法
阿新 • • 發佈:2018-04-14
ews lpad edi pac cin wid nowrap 用法 add
? ? ? ? 一、div標簽中使用text-overflow樣式屬性值ellipsis的方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>div標簽中使用text-overflow樣式屬性值ellipsis的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </head> <body> <div style="width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid #336699;">有誌氣者不會甘居下遊,有見識者不敢自滿自足。有恒心者斷無不成之事!</div> </body> </html>
? ? ? ? 二、table標簽子標簽td標簽中使用text-overflow樣式屬性值ellipsis的方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>table標簽子標簽td標簽中使用text-overflow樣式屬性值ellipsis的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </head> <body> <table cellSpacing="0" cellpadding="1" width="456" border="1" style="table-layout:fixed;"> <tr> <td style="text-overflow:ellipsis; overflow:hidden; white-space:nowrap; padding:2px;">有誌氣者不會甘居下遊,有見識者不敢自滿自足,有恒心者斷無不成之事!</td> </tr> </table> </body> </html>
? ? ? ? 說明:代碼二中的樣例在某些瀏覽器(比方:Opera瀏覽器)中是達不到對應的效果的。
text-overflow樣式屬性值ellipsis的用法