首页 > Web开发 > 详细

CSS中的text-overflow:clip|ellipsis的使用

时间:2016-09-27 18:06:58      阅读:217      评论:0      收藏:0      [点我收藏+]
如果想让某个容器(div或者li或者...块级元素)显示一行文字,当文字内容过多时,不换行,而是出现...,可以使用text-overflow:clip|ellipsis
基本语法:text-overflow : clip | ellipsis
若为text-overflow:clip  取默认值,不显示省略标记(...),而是简单的裁切
若为text-overflow:ellipsis  当对象内文本溢出时显示省略标记(...)  
例如:
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
	#box{
		width:100px;
		background-color:#87CEEB;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}   
  </style>
 </head>
 <body>
  <div id="box">helloworldhelloworldhelloworldhelloworldhelloworldhelloworld</div>
 </body>
</html>

注:overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用

1.一定要给容器定义宽度.

2.如果少了overflow: hidden;文字会横向撑到容易的外面

3.如果少了white-space:nowrap;文字会把容器的高度往下撑;即使你定义了高度,省略号也不会出现,多余的文字会被裁切掉

4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉,就相当于你这样定义text-overflow:clip.

CSS中的text-overflow:clip|ellipsis的使用

原文:http://www.cnblogs.com/chunyansong/p/5913564.html

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