CSS之文字溢出隐藏

  • Post author:
  • Post category:其他


###单行文字溢出隐藏

div{
    width: 200px;
}
p{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space:nowrap;
}

效果图如下:

这里写图片描述

###多行文字溢出隐藏

  • 只能兼容chrome 和大部分的移动端
div{
	width: 150px;
}
p{
  	overflow: hidden;
  	text-overflow: ellipsis;
  	white-space:wrap;
  	display:-webkit-box;
  	-webkit-box-orient:vertical;
  	-webkit-line-clamp:3;
  	//利用webkit的私有属性
}

效果图如下:

这里写图片描述

  • 利用 margin 负值来实现多行文本溢出
//html
<div class="text_overflow"> 
	<div class="text_con">这是一段比较长的文字,用来测试是否文字溢出时会用省略号显示。这是一段比较长的文字,用来测试是否文字溢出时会用省略号显示。这是一段比较长的文字,用来测试是否文字溢出时会用省略号显示。
	</div> 
	<div class="text_dotted">…</div> 
</div>

//css
.text_overflow{
	width:24em; 
	height:3.9em; 
	overflow:hidden; 
	zoom:1;
} 
.text_overflow .text_con{
	float:left; 
	height:3.9em; 
	margin-right:3em; 
	overflow:hidden;
} 
.text_overflow .text_dotted{
	width:3em; 
	height:3.93em; 
	float:right; 
	margin-top:-1.3em;
}

效果图如下:

这里写图片描述


这个方法是从张鑫旭大神的一篇文章看到的,直接放出链接。

原理也很简单,在容器中放置一段文本和点点点,使点点点浮动同时,设置margin-top为负值时,点点点就会上去。但是要注意

文本的高度要和容器高度相同,且文本需要设置margin-right,数值等于点点点的宽度

,相当于给点点点预留出位置



版权声明:本文为q821901733原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。