首页 > 其他 > 详细

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

时间:2018-04-14 10:08:08      阅读:206      评论:0      收藏:0      [点我收藏+]

? ? ? ? 一、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的用法

原文:https://www.cnblogs.com/zhchoutai/p/8830269.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!