本文介绍一种简洁可靠的前端方案，通过 包裹多行地址段落，结合 onclick 与 title 属性，实现点击任一段落即可复制完整地址，并自动显示“click to copy”提示。

本文介绍一种简洁可靠的前端方案，通过 `

` 包裹多行地址段落，结合 `onclick` 与 `title` 属性，实现点击任一段落即可复制完整地址，并自动显示“click to copy”提示。

要实现“点击任意地址行复制整段地址”的功能，关键在于语义正确性与DOM 可控性。原始方案中使用 包裹多个

是不合法的 HTML（

只允许内联内容，禁止嵌套块级元素如

），不仅导致渲染异常，也使 JavaScript 获取文本失败。

✅ 推荐做法：用

替代

，并利用 this 引用传入当前容器，直接读取 .innerText（自动合并换行与空格，符合地址阅读习惯）：

<div onclick="copyText(this)" title="Click to copy full address" class="address-block">
  <p>Address line 1</p>
  <p>Address line 2</p>
  <p>Address line 3</p>
  <p>County</p>
  <p>Post code</p>
</div>

对应 JavaScript 需修正为现代、健壮的写法（避免过时 API，处理 Promise 和错误）：

function copyText(element) {
  const fullAddress = element.innerText.trim();

  // 使用现代 Clipboard API（需 HTTPS 或 localhost）
  navigator.clipboard.writeText(fullAddress)
    .then(() => {
      // 可选：临时反馈（如 tooltip 或 toast）
      showCopyFeedback('✓ Copied to clipboard!');
    })
    .catch(err => {
      console.error('Failed to copy address:', err);
      alert('Copy failed. Please try again.');
    });
}

// 简易视觉反馈（可替换为 CSS 动画 toast）
function showCopyFeedback(msg) {
  const feedback = document.createElement('div');
  feedback.textContent = msg;
  feedback.style.cssText = `
    position: fixed; top: 20px; right: 20px;
    background: #4CAF50; color: white; padding: 10px 16px;
    border-radius: 4px; z-index: 1000; font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  `;
  document.body.appendChild(feedback);

  setTimeout(() => {
    feedback.remove();
  }, 2000);
}

⚠️ 注意事项：

• navigator.clipboard 在非安全上下文（HTTP 非 localhost）中不可用，请确保部署在 HTTPS 或本地开发环境；
• .innerText 会将多行

  自动转为带换行符的纯文本（\n），粘贴到记事本、邮件等场景天然适配；若需 HTML 换行（如
  ），可用 element.innerHTML.replace(/]*>/g, '').replace(/\s+/g, ' ').trim() + 手动换行，但通常不推荐；

• title 属性已满足基础悬停提示需求；如需更美观提示，建议用 CSS + ::after 或第三方库（如 Tippy.js）增强体验；
• 为提升可访问性（a11y），可额外添加 role="button" 和 tabindex="0"，并监听 Enter/Space 键触发复制。

该方案轻量、兼容主流浏览器（Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+），无需依赖框架，适合快速集成到任何静态页面或 CMS 输出中。