如何隐藏address元素中的前两个坐标项，仅显示地址核心信息？

我有一个展示如下内容的<address>标签：

<address class="address address--tight">
      -17.7353231,-63.1696634, Av. Block, NY00, Miami, United States
</address>

请问如何隐藏其中的前两个元素（即坐标部分），只显示街道地址、城市和国家信息？

方法一：修改HTML结构（最稳妥） #

如果有权限修改HTML，直接把坐标拆成单独元素，用CSS隐藏：

<address class="address address--tight">
  <span class="address-coords">-17.7353231,-63.1696634, </span>
  Av. Block, NY00, Miami, United States
</address>

对应的CSS：

.address-coords {
  display: none;
}

方法二：JavaScript动态处理（无需改HTML） #

如果没法修改HTML，用JS分割文本并过滤掉坐标部分：

const addressEl = document.querySelector('.address.address--tight');
if (addressEl) {
  const fullText = addressEl.textContent.trim();
  // 按逗号分割成数组
  const parts = fullText.split(',');
  // 去掉前两个元素，重新拼接剩余内容
  const filteredAddress = parts.slice(2).join(',').trim();
  addressEl.textContent = filteredAddress;
}

如果需要保留原始文本（比如供复制使用），可以把坐标隐藏而非删除：

const addressEl = document.querySelector('.address.address--tight');
if (addressEl) {
  const fullText = addressEl.textContent.trim();
  const parts = fullText.split(',');
  const coords = parts.slice(0, 2).join(',').trim();
  const restAddress = parts.slice(2).join(',').trim();
  // 用隐藏的span包裹坐标
  addressEl.innerHTML = `<span style="display: none;">${coords}, </span>${restAddress}`;
}

方法三：纯CSS临时方案（适合固定格式场景） #

如果不想用JS，且坐标长度变化不大，可以用CSS遮盖：

.address.address--tight {
  position: relative;
  /* 留足够空间给后面的地址内容 */
  padding-left: 240px;
  overflow: hidden;
}

.address.address--tight::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 240px;
  /* 背景色和父元素一致，盖住坐标 */
  background-color: #ffffff;
}

注意：这个方法依赖坐标的宽度，若坐标长度变化大，可能会遮不住或遮住部分有效内容。

内容的提问来源于stack exchange，提问作者Coc L