CSS常用技巧备忘录

布局相关

1、实现 列表 label 不换换行,内容自适应剩余宽度换行显示

先上实际效果图

具体结构和样式设置如下

HTML

1
2
3
4
5
6
7
8
<div class="parent">
<div class="label">
代表作
</div>
<div class="content">
代表作内容
</div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent {
display: flex;
}
.label {
display: inline-block;
height: 100%;
white-space: nowrap;
}
.content {
display: inline;
word-wrap: break-word;
word-break: break-all;
}