贵州建筑工程网岳阳seo公司
一、魔法
为 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">sdsd</div>
| min-width | width | max-width | 盒子最终宽度 |
|---|---|---|---|
| 200px | 最小宽度 200px | ||
| 100px | 定宽 100px | ||
| 300px | 最大宽度 300px | ||
| 200px | 100px | 定宽 Max(min-width, width) | |
| 100px | 300px | 定宽 Min(width, max-width) | |
| 200px | 100px | 300px | 定宽 Max(min-width, width) |
二、应用
ElementUI 的组件 Select，当可选项的文本较长时，弹框也会跟着扩增宽度，因为它只设置了min-width属性。
提出需求，当可选项的文本过长时，以省略号展示，不运行弹框宽度增加。
此时可以应用上述的规则，为弹框添加一个width: 0px即可
