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

  • 相关阅读:
    iframe
    服务器 开发机 linux docker
    git
    iframe because an ancestor violates the following Content Security Policy directive: "frameancestors 'self'
    @babel/pluginproposaloptionalchaining
    jest
    富文本编辑器
    thymeleaf+layui渲染错误
    springboot静态资源访问
    layui的树型组件的使用
  • 原文地址:https://www.cnblogs.com/zhchoutai/p/8830269.html
Copyright © 2011-2022 走看看