Fork me on GitHub

小记一个简单的样式布局二

开发中遇到一个样式布局,值得留意,王二在这里小计一下

开发时列表显示遇到这样两个需求:

  • 表格的列数是动态的,管理后台设置几列,页面上就显示几列;
  • 每一列的显示文字如果超出这一列则显示点点点

动态设置宽度,可以用弹性盒子 flex 来解决;显示点点点,可以用样式 text-overflow:ellipsis; 来搞定,

但是两个同时使用会出现一些问题,因为用 text-overflow:ellipsis; 显示点点点需要固定盒子的宽度,而恰好这里又是弹性盒子,所以这里用到了绝对定位来固定盒子的宽度,

于是有如下的示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<style>
.main{
display: flex;
width: 300px;
height: 80px;
border: 1px dashed gray;
}
.main>*{
border: 1px dashed orange;
flex: 1;
position: relative;
}
.aa{
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.bb{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
<div class="main">
<div>
<div class="aa">
<div class="bb">显示点点点显示点点点显示点点点显示点点点</div>
</div>
</div>
<div>
<div class="aa">
<div class="bb">正常显示</div>
</div>
</div>
<div>
<div class="aa">
<div class="bb">正常显示</div>
</div>
</div>
</div>

效果图如下:

Alt text

后来发现以上样式在 Safiri 上显示有一些问题,于是将 aa 的样式修改如下,就兼容了:

1
2
3
4
5
6
7
8
9
10
.aa{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
-------------本文结束感谢您的阅读-------------