在项目开发中,我们会遇到因为字段值过长导致样式变得很丑。我的解决方案是过长后就以xxx...代替。
.base-applicant-list-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
width: 300px;
}
这个可以实现过长用xxx...代替的需求,但是这样写不会随着屏幕的分辨率变化而有变化,因此,我将其改善了一下:
.base-applicant-list-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 381px;
display: inline-block;
vertical-align: middle;
}
@media (min-width: 1320px ) and (max-width: 1380px ) {
.ant-table-thead > tr > th.ant-table-selection-column,
.ant-table-tbody > tr > td.ant-table-selection-column {
width: 38px !important;
min-width: 38px !important;
}
}
@media (min-width: 1240px ) and (max-width: 1319px ) {
.ant-table-thead > tr > th.ant-table-selection-column,
.ant-table-tbody > tr > td.ant-table-selection-column {
width: 38px !important;
min-width: 38px !important;
}
}
@media screen and (max-width: 1239px ) {
.ant-table-thead > tr > th.ant-table-selection-column,
.ant-table-tbody > tr > td.ant-table-selection-column {
width: 38px !important;
min-width: 38px !important;
}
.base-applicant-list-name {
max-width: 265px;
}
}
主要是将之前的width属性改成max-width,并使用@media动态识别屏幕分辨率,从而动态省略不同的信息。