在日常开发中，设计师总是提出各种异想天开的需求css3溢出省略号，这给我们的UI修复工作带来了很多挑战。 看起来有时候会花费我们很多时间去实现，但一方面，这也是一个让我们对浏览器布局形式有更深入了解的机会。 本文主要记录之前工作中遇到的特殊布局，都是通过CSS的方式实现的。
多条件空白布局
图中有两个内容块A和B。 它们的长度取决于内容的长度。 左右边距受 max-width: 200px 限制，中边距受 min-width: 150px 限制。 如果减少parent的长度，中间的空间仍会保持150px的长度，左右的空间长度会跟随parent的长度而缩小。 如右图所示：
从需求描述来看，需要的是一个既支持弹性（长度随父级长度变化）又支持约束（最大宽度、最小宽度）的属性。 说到灵活性，很自然的就会想到Flex布局。 只要添加占位符元素css3溢出省略号，就可以在伪类之前或之后使用或者自动插入元素，然后添加flex:1和限制。
在线预览：
代码沙盒地址：
代码：
.container {display: flex;}// 左右侧留白.left,.right {flex: 1;max-width: 200px;}// 中间留白.center {flex: 1;min-width: 150px;}
<div class="container"><div class="left"></div><div>Content A</div><div class="center"></div><div>Content B</div><div class="right"></div></div>
中间文本截断
要求：文件名页面必须显示文件扩展名，非扩展名部分溢出时显示省略号。
短文件名：
长文件名：
首先需要使用JS对文件名进行修剪，将其拆分为两部分：非扩展部分和扩展部分，并将它们放置在两个相邻的元素中。 当文件名长于父级时，右侧元素的长度取决于内容。 当达到最大值时，文本将被截断以显示缩写，并且左侧元素与右侧元素一起向右移动，始终保持自己的长度而不缩放。
对于这样的问题，很自然的想到了flex-shrink。 flex-shrink用于设置当父元素的长度大于所有子元素长度之和时（即子元素会超出父元素），子元素如何收缩长度。
在线预览：
代码沙箱地址：
代码：
<style>.container {display: flex;}.left {flex-shrink: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.right {white-space: nowrap;}</style>
<div class="row"><span class="left">超长的文件名超长的文件名超长的文件名超长的文件名<span class="right">.jpeg
