基于JS的自定义空格前置省略号实现问题求助

代码示例 #

HTML #

<div class="autopilot-related-content aem-GridColumn aem-GridColumn--default--12">
  <div class="cmp-autopilot-rc">
    <div class="cmp-autopilot-rc__wrapper">
      <h1 class="cmp-autopilot-rc__title">ALSO OF INTEREST</h1>
      <div class="cmp-autopilot-rc__wrapper__links">
        <a class="cmp-autopilot-rc__link" href="#" aria-label="Individual and Family Health Insurance Plans">Individual and Family Health Insurance Plans</a> 
        <a class="cmp-autopilot-rc__link" href="#" aria-label="It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editor">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editor</a> 
        <a class="cmp-autopilot-rc__link" href="#" aria-label="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</a>
      </div>
    </div>
  </div>
</div>

CSS #

.autopilot-related-content {
  background-color: #c7c2da;
}

.cmp-autopilot-rc {
  padding: 20px 0;
}

.cmp-autopilot-rc__wrapper {
  max-width: 1200px;
  padding: 0;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: auto;
  display: flex;
  align-items: center;
  margin: 0 auto;
}

.cmp-autopilot-rc__title {
  max-width: 10%;
  margin: 0 60px 0 0;
  color: #343741;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.15789rem;
  letter-spacing: 5px;
}

.cmp-autopilot-rc__wrapper__links {
  flex-wrap: nowrap;
  justify-content: space-between;
  display: flex;
  align-items: center;
  flex: 1 0 50%;
  font-size: 19px;
}

.cmp-autopilot-rc__link:not(:last-of-type) {
  margin-right: 10px;
}

.cmp-autopilot-rc a {
  color: #5b3880;
}

.cmp-autopilot-rc__link {
  width: 310px;
  margin-top: 0;
  text-align: center;
  font-size: 1.05263rem;
  letter-spacing: 0;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  max-height: 52px;
  line-height: 26px; /* 固定行高，确保两行显示 */
}

原始JS（存在固定字符限制问题） #

const relatedContent = () => {
  let allRelatedContents = document.querySelectorAll('.cmp-autopilot-rc')
  for (const relatedContent of allRelatedContents) {
    addEllipsis(relatedContent)
  }
}

const addEllipsis = (relatedContent) => {
  let allLinks = relatedContent.querySelectorAll('.cmp-autopilot-rc__link')
  for (const link of allLinks) {
    let ta = link
    let text = ta.getAttribute('aria-label')
    let limit = 84
    text = text.length > limit ? `${text.substring(0, (limit - 4))} ...` : text

    ta.innerHTML = text
  }

}

document.addEventListener('DOMContentLoaded', () => {
  if (document.querySelectorAll('.cmp-autopilot-rc')) {
    relatedContent()

    window.addEventListener('resize', () => {
      relatedContent()
    })
  }
})

问题描述 #

想用JS实现规范的省略号效果，但客户要求省略号前必须保留空格，无法使用line-clamp属性。设置固定字符限制84时，第三条内容的省略号顶到容器末尾，第二条内容却没填满容器还有剩余空间；改成95的话，第二条显示正常，但第三条两行放不下95个字符。需要找到给每条内容设置动态字符限制的方法，或者其他能实现带空格省略号的方案。

解决方案 #

方案一：基于容器高度的动态截断（推荐） #

核心逻辑是通过对比元素的滚动高度和可视高度，判断内容是否溢出，然后逐步截断文本直到内容刚好适配容器，同时保证省略号前有空格。

修改后的JS代码：

const relatedContent = () => {
  const allRelatedContents = document.querySelectorAll('.cmp-autopilot-rc')
  allRelatedContents.forEach(relatedContent => addEllipsis(relatedContent))
}

const addEllipsis = (relatedContent) => {
  const allLinks = relatedContent.querySelectorAll('.cmp-autopilot-rc__link')
  allLinks.forEach(link => {
    const originalText = link.getAttribute('aria-label')
    if (!originalText) return
    
    // 重置文本，避免resize时重复截断
    link.textContent = originalText
    const maxHeight = link.clientHeight
    
    // 内容未溢出，直接返回
    if (link.scrollHeight <= maxHeight) return
    
    // 逐步截断文本，直到内容不溢出
    let truncatedText = originalText
    while (link.scrollHeight > maxHeight && truncatedText.length > 0) {
      // 找到最后一个空格的位置，确保省略号前有空格
      const lastSpaceIndex = truncatedText.lastIndexOf(' ')
      if (lastSpaceIndex === -1) break // 无空格时直接截断
      truncatedText = truncatedText.substring(0, lastSpaceIndex)
      link.textContent = `${truncatedText} ...`
    }
  })
}

document.addEventListener('DOMContentLoaded', relatedContent)
window.addEventListener('resize', relatedContent)

优势：适配每个元素的内容差异，不管字符宽度不同，都能保证省略号前有空格，且内容刚好填满容器高度，不会出现留白或溢出。

方案二：CSS伪元素模拟（兼容方案） #

如果不想用JS，可以通过CSS伪元素添加带空格的省略号，配合背景色覆盖溢出内容：

修改后的CSS（需配合JS判断溢出状态）：

.cmp-autopilot-rc__link {
  width: 310px;
  margin-top: 0;
  text-align: center;
  font-size: 1.05263rem;
  letter-spacing: 0;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  max-height: 52px;
  position: relative;
  line-height: 26px;
  padding-right: 25px; /* 给省略号留空间 */
}

.cmp-autopilot-rc__link.overflow::after {
  content: " ...";
  position: absolute;
  bottom: 0;
  right: 10px;
  background-color: #c7c2da; /* 和容器背景色一致，覆盖多余文字 */
}

补充JS判断溢出并添加类：

// 在addEllipsis函数中添加
if (link.scrollHeight > link.clientHeight) {
  link.classList.add('overflow')
} else {
  link.classList.remove('overflow')
}

注意：该方案兼容性较好，需确保伪元素背景色与容器背景一致，避免露出被覆盖的文本。

内容的提问来源于stack exchange，提问作者Dijish U.K