固定宽度

2023年10月07日

柏拉文

越努力，越幸运

一、超出两行, 缩小字号; 超过三行, 超出省略

---

1.1 需求描述

文本根据屏幕宽度自适应折行, 当超过 2 行时, 采用最小字号; 当超过 3 行时, 超出省略。

1.2 具体实现

Html

<div class="container">看接口付电费发的酸辣房东</div>

Css

.container {
    width: 300px;
    font-size: 24px;
    position: relative;
    overflow: hidden;
    line-height: 36px;
    display: inline-block;
}
.container.overflow {
    overflow: hidden;
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

JavaScript

function getCssValue(value) {
    value = String(value);
    if (value.endsWith('%')) {
        return parseFloat(value) / 100.0;
    }
    return parseFloat(value);
}

function getLineHeightRadix(value, fontSize) {
    if (value === 'normal') {
        return 1.14;
    } else if (value.endsWith('%')) {
        return getCssValue(value);
    } else if (
        value.endsWith('px') ||
        value.endsWith(/(vw|vh)/) ||
        value.endsWith('em') ||
        value.endsWith('rem')
    ) {
        return (getCssValue(value) / getCssValue(fontSize)).toFixed(2);
    }
    return value;
}

function adaptiveSize(node) {
    const minFontSize = 12;
    const nodeStyle = getComputedStyle(node);
    let fontSize = getCssValue(nodeStyle.fontSize);
    const lineHeightRadix = getLineHeightRadix(
        nodeStyle.lineHeight,
        fontSize
    );
    let lineHeight = lineHeightRadix * fontSize;

    let row = Number((node.clientHeight / lineHeight).toFixed(0));

    if (row >= 2) {
        node.style.fontSize = minFontSize + 'px';
        node.style.lineHeight = lineHeightRadix * minFontSize + 'px';
    }

    lineHeight = getCssValue(nodeStyle.lineHeight);
    row = Math.ceil(node.clientHeight / lineHeight);

    if (row >= 3) {
        node.classList.add('overflow');
        const lineHeight = getCssValue(nodeStyle.lineHeight);
        node.style['-webkit-line-clamp'] = 3;
    }
}

const containerDOM = document.querySelector('.container');
adaptiveSize(containerDOM);