常用的css 代码块省略号小图标清除浮动小三角心形_css 图片删除的小三角-优快云博客

本文介绍了多种CSS技巧，包括清除浮动的方法，如何使用伪元素创建不同方向的小三角形，文本末尾添加省略号的技巧，以及如何使图片在div中水平垂直居中。还展示了如何用CSS绘制心形图案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

清除浮动

.clearfix:after { 
	content: "\00A0"; 
	display: block; 
	visibility: hidden; 
	width: 0; 
	height: 0; 
	clear: both; 
	font-size: 0; 
	line-height: 0; 
	overflow: hidden;
}
.clearfix { zoom: 1;}

小三角
四个方向的三角形

.triangle { border: solid 10px transparent; }
.triangle .bottom { border-top-color: green;}//下
.triangle .top { border-bottom-color: green;}//上
.triangle .top { border-right-color: green;}//左
.triangle .top { border-left-color: green;} //右

文本末尾添加省略号
宽度固定，单行显示…

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

宽度不固定，

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

图片上下左右居中
一种方式是把外层的 div 设为 table-cell。
另一种方式，就是把 img 当做 div，CSS 代码如下：

.content { 
	width: 400px; 
	height: 400px; 
	border: 1px solid #ccc; 
	text-align: center;
	display: table-cell; 
	vertical-align: middle;
}

html 代码如下：

<div class="content"><img src="" alt="img" /></div>

心形

.heart { 
	display: inline-block;
	margin-top: 1.5em; 
	width: 50px; 
	height: 50px; 
	background: green;
}
.heart:before,.heart:after { 
	position: absolute; 
	width: 1em; 
	height: 1.6em; 
	background: #000; 
	border-radius: 50% 50% 0 0; 
	content: ""; 
	bottom: 0;
}
.heart:before { 
	-webkit-transform: rotate(45deg); 
	-webkit-transform-origin: 100% 100%; right: 0; 
	background: red; 
	opacity: 0.5; 
	z-index: 5;
}
.heart:after { 
	-webkit-transform: rotate(-45deg); 
	-webkit-transform-origin: 0 100%;
	 left: 0; 
	 opacity: 0.8;
 }