CSS宽度问题

一、魔法

为 DOM 设置宽度有哪些方式呢？最常用的是配置width属性，width属性在配置时，也有多种方式：

• width
• min-width
• max-width

通常当配置了 width 时，不会再配置min-width max-width，如果将这三者混合使用，会有什么魔法效果呢？

测试代码：

<style>
  .box {
    display: inline-block;
    border: 1px solid #e8e8e8;
    min-width: 200px;
    width: 100px;
    max-width: 300px;
  }
style>

<div class="box">sdsddiv>
1
2
3
4
5
6
7
8
9
10
11

二、应用

ElementUI 的组件 Select，当可选项的文本较长时，弹框也会跟着扩增宽度，因为它只设置了min-width属性。

提出需求，当可选项的文本过长时，以省略号展示，不运行弹框宽度增加。

此时可以应用上述的规则，为弹框添加一个width: 0px即可