单行省略失效http://www.Sina.com/divclass=' f ' divclass=' left ' 11111/divdivclass=' right ' span 22222222222222222222222222220/2222222222222222222222222222222222222222222222 background-color: pink； margin: 100px auto； overflow :隐藏； 文本覆盖： ellipsis； white-space: nowrap； display :闪存； justify-content: flex-start； } .right { flex: 1； overflow :隐藏； 文本覆盖： ellipsis； white-space: nowrap； background-color: aqua； } .left { width: 100px； background-color : antique white； }左框固定宽度，右框充满适应性
此时，在class中向right的箱子添加了单行省略的代码
overflow :隐藏； 文本覆盖： ellipsis； white-space: nowrap；
这个箱子通常省略超出部分的内容
http://www.Sina.com/divclass=' f ' divclass=' left ' 11111/divdivclass=' right ' divclass=' rights on ' span 22222222222222222
. rightSon { width: 100%； overflow :隐藏； 文本覆盖： ellipsis； white-space: nowrap； }然后注释掉right框中的单行省略文本样式
. right { flex: 1；/* overflow :隐藏； 文本覆盖： ellipsis； white-space: nowrap； */background-color: aqua； }但是
运行后，发现rightSon框没有实现单行文本省略，文字由left框支撑
此时，恢复right框中一行的文本省略样式
. right { flex: 1； overflow :隐藏； 文本覆盖： ellipsis； white-space: nowrap； background-color: aqua； }驾驶后获得
此时可以得到我们想要的效果
http://www.Sina.com/divclass=' f ' divclass=' left ' 11111/divdivclass=' right ' divdivdivclass=' rights on ' spaspas
所以
在右侧包含整体内容的right框中，必须添加单行省略文本的样式
还必须在包含文本的rightSon框中添加单行文本省略样式
中间的不需要添加单行省略文本样式