4.题型：.g-list-item{position:relative;显示：弹性；填充：0.5rem1rem；border-bottom:1pxsolid#eee;}.item-content-wrap{display:flex;弹性：1；弹性方向：列；证明内容：空格；}.item-content-wrap.item-title{溢出：隐藏；文本溢出：省略号；white-space:nowrap;}5、解决方案：解决方案一：①原理：flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。后两个属性是可选的，这个属性有两个快捷值：auto（11auto）和none（00auto）。.item{flex:无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}flex-grow属性定义item的放大（拉伸）比例，默认为0，即有剩余空间不放大。flex-shrink属性定义了item的缩小（压缩）比例，默认为1，即如果空间不足，item会收缩。flex-basis属性定义了一个项目在分配多余空间之前在主轴（主要尺寸）上占据了多少空间。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。当我们设置white-space:nowrap时，item控件无法收缩，因为它无法计算额外的空间。此时我们可以通过设置一个固定大小来缩小②代码：.g-list.item-content-wrap{flex:1;显示：弹性；弹性方向：列；证明内容：空格之间；+最小宽度：0；}.g-list.item-content-wrap{flex:1;显示：弹性；弹性方向：列；证明内容：空格之间；+overflow:hidden;}对于文本.item-title可以通过min-width、max-width、width属性设置父级的宽度，但是因为文本的长度是可变的，设置width或者max-width可能会覆盖有效区域，所以建议使用min-width:0比较合适；另外，通过overflow:hidden将父元素改为BFC也可以达到同样的效果。最小宽度：0；最小宽度：300px；最大宽度：300px；宽度：300px；溢出：隐藏；方案二：①原理：其实造成这种情况的不是父item-content-wrap的flex，而是父级g-list-item的flex。如果我们的布局是自上而下的结构，我们可以去掉父级的display:flex来实现相应的效果②代码：.g-list-item{position:relative;—显示：弹性；填充：0.5rem1rem；border-bottom:1pxsolid#eee;}方案三：①原理：利用style实现超出一行显示省略号不仅可以使用white-space:nowrap属性，我们还可以使用如下属性来实现效果,通过-webkit-line-clamp可以在省略号出现之前设计几行。但由于兼容性问题，建议使用overflow:hidden；显示：-webkit-box；-webkit-line-clamp:1;-webkit-box-orient：垂直；②代码：.item-content-wrap.item-title{overflow:hidden;—文本溢出：省略号；—空白：nowrap；+显示：-webkit-box；+-webkit-line-clamp:1;+-webkit-box-orient：垂直；}尊重原创，如需转载请注明出处！