业务需求:标题文字环绕标签超出显示省略号。
shape-outside 的用法
shape-outside 的主要函数值有四个,分别是:
- inset():表示浮动文字按照上、右、下、左在浮动元素上的偏移量得出的矩形边缘进行围绕
- circle():表示浮动文字按照 shape-radius 为半径画出的圆形的外边缘围绕
- ellipse():表示浮动文字按照 x 轴以 xr 为半径,y 轴以 yr 为半径画出的椭圆形的外边缘围绕
- polygon(x1 y1, x2 y2, ..., xn yn):表示浮动元素按照,通过给定的坐标点的值连接画出的不规则形状的边缘进行围绕
polygon 参数说明:
x1:表示第一个点在x轴的坐标位置
y1:表示第一个点在y轴的坐标位置
x2:表示第二个点在x轴的坐标位置
y3:表示第二个点在y轴的坐标位置
xn:表示第n个点在x轴的坐标位置
yn:表示第n个点在y轴的坐标位置
示例代码:
<div class="item_title">
<div class="item_tag">标签</div>
<div class="text_item">
标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
</div>
</div>
.item_title {
width: 100%;
font-size: 28rpx;
line-height: 28rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: auto;
}
.item_tag {
width: 60rpx;
height: 36rpx;
float: left;
/* 让圆形元素浮动到左侧 */
shape-outside: circle();
font-size: 20rpx;
color: #FF7B31;
background: rgba(255, 123, 49, 0.2);
}
.text_item {
margin: 0;
}
描述:
通过float进行左浮动,再通过chape-outside属性进行文字环绕。