label元素设置行高16px 高度32px display:flex flex: 1; font-size: 14px; align-items: center; justify-content: flex-end; 如果内容大于3行显示省略号
时间: 2023-07-01 11:17:48 浏览: 231
这是一个关于 CSS 样式的问题。根据你的描述,我理解你想要设置一个 label 元素,行高为 16px,高度为 32px,使用 flex 布局,字体大小为 14px,内容垂直居中并水平靠右显示,当内容超过三行时,显示省略号。
可以使用以下 CSS 样式实现你的需求:
```
label {
display: flex;
align-items: center;
justify-content: flex-end;
height: 32px;
line-height: 16px;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
```
其中,使用了 `line-height` 设置行高,`height` 设置元素高度,`display: flex` 开启 flex 布局,`align-items: center` 和 `justify-content: flex-end` 分别设置了垂直和水平居中显示,`overflow: hidden` 和 `text-overflow: ellipsis` 用于显示省略号,`-webkit-line-clamp` 和 `-webkit-box-orient` 则用于控制显示行数。
阅读全文