CSS控制字段值过长

在项目开发中，我们会遇到因为字段值过长导致样式变得很丑。我的解决方案是过长后就以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动态识别屏幕分辨率，从而动态省略不同的信息。