css单行显示多余省略注意事项

CSS怎么显示？

css换行显示，网上一搜一大堆，最简单的不外乎如下代码：

.singleLine {
  white-space: nowrap;/*禁止文字内容折行*/
  overflow: hidden !important; /*超出部分溢出隐藏*/
  text-overflow: ellipsis;/*文字以省略号的方式隐藏*/
}

但是注意了！！！ 这里有个前提就是这个只支持该标签是没有横向布局的父节点，如果你要在横向布局的某个div或者view显示单行文本，则只这样设置是不行的，因为外层父节点未设置超出部分溢出隐藏，造成宽度不对。比如我要实现以下效果：
前后都有单行显示，多余省略的需求，则还需要设置外层的父节点也为单行显示，否则会出现以下情况：

这个情况时未设置父节点超出部分溢出隐藏overflow，样式代码：

.luck-container {
  align-items: center;
  flex-direction: row;
  display: flex;
  overflow: hidden !important; /*超出部分溢出隐藏*/
}

此外如果还是显示不正常，比如icon和文字换行了，那么可以考虑父节点单行显示：

.luck-container {
  align-items: center;
  flex-direction: row;
  display: flex;
  overflow: hidden !important; /*超出部分溢出隐藏*/
  flex-wrap: nowrap; /*当前容器不换行显示*/
}

后记

这个问题困扰了我好几天，总是设置不正确，所以记录一下，所以有时候我们需要跳出原来的思维范畴，看看是不是其他哪里没设置好，比如外层影响或者有像是冲突（同名样式）。