在css里，单行文本超出部分用省略号的写法：

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

可这个如果它的宽度主要是依靠 grid 的 fr 而来的话，(即当容器本身并未设置宽度，而它的宽度主要是由父辈、祖辈的 grid 的栏得来的)，浏览器省略号将失效，主要原因是因为 white-space 设置不换行，导致内容的宽度撑开了 grid 所设置的子项宽度。这表现得像英文的不可换行一样。

此时，若不想给固定的宽度，可以通过给 grid 的子项加一个属性

overflow: hidden

此时，可使得 grid 的子项宽度，强制以 grid 所设置的为主。自然给了子辈元素一个“坚固”的宽度，从而使得 white-space 属性有了宽度依据。

补：calc 支持复杂的计算方法 + - * / 等，但负数时，- 和数字间一定不能加空格，否则直接报错。

margin-top: calc(-67vw * 0.667 + (67vw * 0.667 - 67vw * 0.5) / 2)           //  举个例子