zoukankan      html  css  js  c++  java
  • 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浏览器)中是达不到对应的效果的。

  • 相关阅读:
    WebSocket来实现即时通讯
    微信小程序1
    使用phpqrcode来生成二维码/thinkphp
    PHP函数积累
    Docker 常用命令汇总(beta)
    Nginx+Keepalived高可用架构简述(beta)
    Docker镜像制作(以Nginx+Keepalived为例)(beta)
    开源协议浅谈(beta)
    【Elasticsearch系列】ES安装(mac)
    linux 下安装JDK
  • 原文地址:https://www.cnblogs.com/zhchoutai/p/8830269.html
Copyright © 2011-2022 走看看