【组件实现】计算内容高度是否溢出

描述

在最近的一些需求中，经常需要判断元素内容的高度是否溢出元素本身。

比如，在一组tab中，如果内容溢出，则展示更多按钮。

比如，在一个文字卡片中，文字超出时，实现鼠标悬浮后文字自动缓慢上划至文字底部。

又或者是最简单的需求，在单行文本溢出时，鼠标悬浮时使用悬浮框展示全部文本。

以上的需求中，仅当内容超出时，才添加更多按钮等内容。也就是说，当内容不溢出时，不需要实现这些效果。

内容溢出判断

经过我多次的实践，判断内容超出，需使用父子两个div元素。父div设置高度与溢出内容隐藏，子div用来计算内容区真实高度，如：

<div class="parent">
    <div class="child">这是一长段文本...</div>
</div>

在内容渲染后，通过child元素获取内容区真实高度，代码如下：

const child = document.querySelecor('.child');
if(child) {
    // 获取内容区高度
    const containerHeight = parseInt(getComputedStyle(child).height);
}

通过parent元素获取容器高度，代码与子元素的高度获取方式一致。

最后判断内容高度是否超出容器高度即可。

文本内容判断

当内容是文本时，如果需求为单行文本超出时末尾展示...，需要使用webkit中设置多行文本省略的方式，使用标准的单行文本省略方式会使child元素无法准确获取内容区高度。

单行文本样式代码：

.one-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

多行文本省略代码：

.multiple-line {
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}