前言
对于单行溢出和单行溢出，大家应该都非常熟悉了，但是在实际应用中，可能出现各种各样的问题，笔者在此记录工作中出现的问题，也欢迎大家分享以及提出自己的宝贵意见
单行溢出
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
这三行代码即为实现单行溢出的核心代码，想要实现文字单行溢出即可完美解决
多行溢出
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
实际应用
在实际工作中，当然不止是文字的溢出省略，而是还需要实现行内元素或行内块元素的溢出省略，在实践的时候，上述对于文字的方式同样可以适用于行内元素/行内块元素。但实际过程中，却不会像文字省略一样丝滑。。。
省略号的位置展示
由于行内块元素自身占据一定的位置，当设置元素的样式为height: 100%或者设置max-width: 100%时，该元素就可能会将父元素的空间全部占满，导致省略号无法展示出来
解决方法：可以设置父元素的样式：padding-right: 16px;即可将省略号的位置让出来，这个大小是可以调节的，具体看设置的字体大小
省略号的颜色
没想到吧，省略号的颜色也是可以控制的，当省略号的颜色和背景颜色一致时，就会出现省略号无法看到的现象，你是否怀疑过是溢出没有生效。
一般而言，省略号的颜色是跟父元素的字体颜色有关，但在有的场景中，省略号会跟紧跟着的最后一个子元素的字体颜色有关（笔者在element-plus表中的子元素遇到过，里面包了很多层，就导致了这个问题）。
解决方法：改变字体颜色即可； 当然如果不想或者不能改变就近字体的颜色，可以用js来进行计算，在最后展示的子元素后方添加一个行内块元素，不设置宽度，仅设置字体颜色即可！
结语
以上解决问题的方法均是利用了css来进行解决的，但用css解决的话会存在一定的缺陷，如果不能满足产品的要求，就需要利用js来获取子元素的宽度，然后用父元素的整体宽度来进行比较判断，然后进行操作，但总感觉没有用css来的自然啦。
