本文介绍一种结合 css 截断与 javascript 动态定位的技术方案，使“read more”链接始终精确出现在两行文本的右下角（而非简单覆盖或替换文字），适配不同长度内容与响应式场景。
本文介绍一种结合 css 截断与 javascript 动态定位的技术方案，使“read more”链接始终精确出现在两行文本的右下角（而非简单覆盖或替换文字），适配不同长度内容与响应式场景。
实现这一效果的关键在于：分离文本渲染与链接定位逻辑——先用 CSS 的 -webkit-line-clamp 安全截断内容，再通过 JavaScript 精确测量实际渲染行高与容器高度，动态计算第二行底部坐标，将链接绝对定位至此。该方案避免了纯 CSS 方案中链接被截断、错位或干扰布局的问题。
✅ 推荐结构与样式
首先，将内容与链接包裹在同一容器中，并启用相对定位：
<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.
</div>
<a href="/article" target="_blank" class="read-more">Read more</a>
</div>
对应 CSS 需确保容器为定位上下文，同时对 .post--content 启用多行截断（注意：line-height 建议使用 em 或 rem 单位以提升可维护性；此处保留 px 便于 JS 精确计算）：
.post--container {
max-width: 300px;
position: relative; /* 关键：为绝对定位提供参照 */
font-size: 14px; /* 建议显式设置，避免 line-height 计算偏差 */
}
.post--content {
line-height: 1.6; /* 推荐使用无单位数值，更健壮 */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
}
.read-more {
position: absolute;
bottom: 0;
right: 0;
background: #007bff;
color: white;
text-decoration: none;
padding: 2px 8px;
font-size: 12px;
border-radius: 2px;
}
⚙️ 动态定位逻辑（JavaScript）
核心思路：获取真实 line-height（支持 em/rem/px），结合 clientHeight 推算当前显示行数，若超过 2 行，则将链接置于第二行底部（top = 2 × line-height）；否则隐藏或移至底部外（如 top: 100% 实现“不显示”效果）：
document.addEventListener("DOMContentLoaded", () => {
const container = document.querySelector(".post--container");
const content = document.querySelector(".post--content");
const readMore = document.querySelector(".read-more");
// 安全获取计算后的 line-height（单位 px）
const computedStyle = window.getComputedStyle(content);
const lineHeightPx = parseFloat(computedStyle.lineHeight) ||
parseFloat(computedStyle.fontSize) * 1.6; // fallback
const maxLines = 2;
const updateLinkPosition = () => {
const height = content.clientHeight;
const lines = Math.round(height / lineHeightPx);
if (lines > maxLines) {
// 精准定位到第二行底边（兼容不同字体渲染差异）
readMore.style.top = `${maxLines * lineHeightPx}px`;
readMore.style.visibility = "visible";
} else {
// 超出两行才显示，否则隐藏
readMore.style.visibility = "hidden";
}
};
// 初始化 + 响应式监听
updateLinkPosition();
window.addEventListener("resize", updateLinkPosition);
// 可选：监听字体加载完成（如使用 Web Font）
if ("fonts" in document) {
document.fonts.load("14px sans-serif").then(updateLinkPosition);
}
});
⚠️ 注意事项与优化建议
- 性能考量：避免高频 resize 触发重排，生产环境建议添加防抖（debounce）；
- 字体加载影响：若使用自定义字体，需等待 document.fonts.load() 完成后再执行定位，否则 clientHeight 可能不准；
- 无障碍支持：为 .read-more 添加 aria-label="Read the full article"，并确保其语义上属于该段落的延伸；
- 降级兼容性：-webkit-line-clamp 在 Firefox 中需启用 display: -moz-box 等前缀（现代项目建议配合 @supports 提供 fallback）；
- SEO 友好：链接保留在 DOM 中且语义清晰，搜索引擎可正常抓取目标 URL。
该方案已在 CodePen 示例（jOdgrbo）中验证有效，兼顾视觉精度、代码可维护性与跨设备一致性。
