当前位置：首页 > article >正文

css-设置单行文本溢出省略号，使用overflow：hidden属性之后的出现的问题几解决办法。

article 2025/2/28 18:35:39

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%的时候也是可以显示完整的