CSS样式文字超出部分自动转成省略号

学习笔记 马富天 2016-05-06 20:11:30 77 2

【摘要】很多时候,当我们要在一行之内显示文本内容,但是有的时候文本内容长度太长,超出了我们所允许的范围,那个时候我们通常会选这使用js或者jQuery来解决这个问题,其实使用css3中的text-overflow:ellipsis; 属性就能够实现。

请先看效果图:

请输入图片名称

实现的规则(需要符合两点):1.强制文本内容在一行之内显示:white-space:nowrap

2.文本溢出的内容要隐藏

下面是完整的网页代码:

  1. <!DOCTYPE>
  2. <html>
  3. 	<head>
  4. 		<title>CSS样式文字超出部分自动转成剩略号</title>
  5. 		<meta charset = "utf-8" />
  6. 		<style type="text/css">					
  7. 			*{
  8. 				margin:0;
  9. 				padding:0;
  10. 				font-size:12px;
  11. 			}
  12. 			div{
  13. 					width:100px;
  14. 					height:30px;
  15. 					line-height:30px;
  16. 					border:1px solid red;
  17. 					color:red;
  18. 					text-align:center;
  19. 					/* 文本溢出的内容隐藏 */  
  20. 					overflow:hidden;  
  21. 					/* 超出部分用省略号替换 */
  22. 					text-overflow:ellipsis; 
  23. 					/* 强制文本内容在一行之内显示 */
  24. 					white-space:nowrap;  
  25. 					word-wrap:break-word;  					
  26. 			}
  27. 		</style>		
  28. 	</head>
  29. 	<body>
  30. 		<p>实现的规则(需要符合两点):1.强制文本内容在一行之内显示:white-space:nowrap</p>
  31. 		<p>2.文本溢出的内容要隐藏</p>
  32. 		<div>这是一段很长很长的句子,其实也不长,但是后面的你就看不到了吧</div>
  33. 	</body>	
  34. </html>

版权归 马富天PHP博客 所有

本文标题:《CSS样式文字超出部分自动转成省略号》

本文链接地址:http://www.mafutian.net/97.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

2

0

上一篇《 网页中透明度四种不同的样式(兼容性) 》 下一篇《 PIE解决CSS3中border-radius在IE浏览器中的兼容性 》
分享到:

所有评论

  1. 首页
  2. 上一页
  3. 1
  4. 下一页
  5. 尾页
  6. 第1页
  7. 每页12条
  8. 共1页
  9. 共2条
评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码