子元素内容超过父元素不显示

Question

父元素P中存在ABC三个元素，宽度都不确定，都是动态的。当ABC宽度加起来小于父元素时，按照ABC顺序显示

当ABC宽度加起来超过P是，按照AC顺序展示，B不显示

思路：

1. 根据设置的样式，渲染之前计算好宽度，如果超过，渲染的时候不渲染B
2. 渲染之后，获取DOM的宽度，根据结果设置B是否渲染

第一个就是受样式影响比较大，不好维护
第二个体验不是很好，页面可能闪动下

有没有更好的解决方案呢？

Answer 1

@media 比较好吧，事先找出来临界宽度，然后设置一下 B 元素隐藏。暂时想不到其它更好的办法（因为你要隐藏）。