[javascript]如何添加 href 链接而不是替换段落中的一些最后字母

· 收录于 2024-01-06 16:49:07 · source URL

问题详情

我有一个问题，想得到帮助。
这是我的 HTML：

<div class="post--content">Lorem ipsum dolor sit amet,nconsectetur adipiscing.Lorem 
 vipsumdolor sit amet,nconsectetur adipiscing.Lorem ipsum dolor sit amet,nconsectetur  
 adipiscing.Lorem ipsum dolor sit amet,nconsectetur adipiscing.Lorem ipsum dolor sit  
 amet,nconsectetur adipiscing.</p>

<a href="link" target="_blank">Read more</a>

我的CSS：

.post--content {
    max-width: 300px;  
    line-height: 11.6px;  
    display: -webkit-box;  
    -webkit-line-clamp: 2;  
    -webkit-box-orient: vertical;  
    overflow: hidden;  
}

如果文本的大小超过宽度的两行，我想隐藏文本。然后在第二行的末尾动态设置我的 href 链接。此 href 链接会将用户带到整篇文章。这样做的目标是与文本的大小无关，始终将我的 href 链接放在此段落中。
https://codepen.io/DaroGawlik/pen/jOdgrbo?editors=1111

最佳回答

您可以为文本和链接创建一个容器，然后使用 JavaScript 动态计算第二行的位置并相应地附加链接。例：

[HTML全文]

<div class="post--container">
    <div class="post--content">Lorem ipsum dolor sit amet, consectetur adipiscing. Lorem ipsum dolor sit amet,
        consectetur adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing. Lorem ipsum dolor sit amet,
        consectetur adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing.
    </div>
    <a href="link" target="_blank" class="read-more">Read more</a>
</div>

CSS的

.post--container {
    max-width: 300px;
    position: relative;
}

.post--content {
    line-height: 11.6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #f2f2f2;
    padding: 5px;
    text-decoration: none;
}

JS系列

document.addEventListener("DOMContentLoaded", function () {
    const container = document.querySelector(".post--container");
    const content = document.querySelector(".post--content");
    const readMore = document.querySelector(".read-more");

    const lineHeight = parseFloat(window.getComputedStyle(content).lineHeight);
    const maxLines = 2;

    const setLinkPosition = () => {
        const height = content.clientHeight;
        const lines = Math.round(height / lineHeight);

        if (lines > maxLines) {
            readMore.style.top = `${maxLines * lineHeight}px`;
        } else {
            readMore.style.top = "100%";
        }
    };

    window.addEventListener("resize", setLinkPosition);
    setLinkPosition();
});