浏览器如何检测文本溢出并显示省略号?

How does a browser detect text-overflow and display ellipsis?

提问人:Virgo Coder 提问时间:9/18/2023 最后编辑:Virgo Coder 更新时间:9/18/2023 访问量:28

问:

我实现了一个div容器

div{ 
    border: 1px solid black;
    width: 75px; 
    padding: 10px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

对于,虽然文本不会溢出 div 容器,但由于它进入了填充区域,浏览器检测到溢出并显示省略号。<div>Overflowing</div>

我只是好奇它是如何检测溢出的,因为当我在控制台中打印相关属性时,我得到了以下结果。

在 Firefox 中

  • 客户端宽度:95
  • 滚动宽度: 95
  • 偏移宽度:97

在 Chrome 中

  • 客户端宽度:95
  • 滚动宽度: 102
  • 偏移宽度:97

对于 Chrome,它能够识别溢出是有道理的,因为 clientwidth < scrollwidth。但是,即使 scrollwidth 小于客户端和偏移宽度,firefox 浏览器如何能够检测到溢出?

CSS google-chrome firefox 溢出 省略号

评论


答: 暂无答案