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動態識別屏幕分辨率，從而動態省略不同的信息。