1 设置单行文本溢出后出现省略号
必要：需要设置固定宽度，不允许换行
width: 200px;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;
2 设置N行文本溢出后出现省略号
width: 200px;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: N; /* 需要几行省略设置几行*/-webkit-box-orient: vertical;
以上就是设置文本溢出省略号显示了。下面是遇到的问题
问题：
在测试中发现当浏览器分辨率调高的话，会出现下方文字被遮挡的bug。125%以上都会出现这个问题。
分辨率影响可真的是不好搞啊，因为很多时候无法定位到具体问题。
我先是将外层的父元素高度调高，发现并未解决
又将line-height: 属性值调低 发现125%可以显示 但是字体就不能垂直居中了。而且调到200%还是会有这个问题。
于是我又将padding-bottom设置为5px。 发现还是行不通 ， 但是我发现padding-bottom调大的时候元素并未发生变化。于是我将元素设置为固定高度，因为此处是单行文本
使用height属性设置元素的高度，而不是直接使用line-height，这样可以防止对下方的元素产生影响。
.content {height: 40px;line-height: 40px;overflow: hidden;display: flex;font-size: 14px;p {height: 40px; // 此处为后来加的 加上之后就可以解决width: 150px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center;}}
当我把浏览器缩放调整到150%的时候 也是可以显示完整的
