• text-overflow样式属性值ellipsis的用法


            一、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="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浏览器)中是达不到对应的效果的。

  • 相关阅读:
    BZOJ3573: [Hnoi2014]米特运输
    BZOJ3531: [Sdoi2014]旅行
    BZOJ3505: [Cqoi2014]数三角形
    BZOJ3309: DZY Loves Math
    BZOJ3260: 跳
    BZOJ3252: 攻略
    BZOJ3226: [Sdoi2008]校门外的区间
    BZOJ3155: Preprefix sum
    BZOJ2843: 极地旅行社
    BZOJ2671: Calc
  • 原文地址:https://www.cnblogs.com/zhchoutai/p/8830269.html
Copyright © 2020-2023  润新知