提问人:Virgo Coder 提问时间:9/18/2023 最后编辑:Virgo Coder 更新时间:9/18/2023 访问量:28
浏览器如何检测文本溢出并显示省略号?
How does a browser detect text-overflow and display ellipsis?
问:
我实现了一个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 浏览器如何能够检测到溢出?
答: 暂无答案
评论