日文应用特定字体下，不使用text-overflow: ellipsis添加省略号

针对日文环境下特定字体导致原生省略号显示异常的问题，以下是两种无需依赖text-overflow: ellipsis的可行方案：

方案一：纯CSS模拟（适合简单场景，存在小局限） #

通过绝对定位的伪元素实现自定义省略号，需保证容器背景色固定（避免省略号无法覆盖文字）：

.myClass {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%; /* 或设置固定宽度 */
  padding-right: 1.2em; /* 为省略号预留空间 */
  background: #ffffff; /* 与页面背景色一致 */
}

.myClass::after {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
  background: inherit; /* 继承容器背景色，覆盖溢出的文字 */
}

局限：内容未溢出时，省略号仍会显示。若需仅在溢出时显示，需结合JS判断。

方案二：CSS+JS组合（更可靠，精准控制显示时机） #

通过JS判断内容是否溢出，动态添加/移除省略号样式：

1. HTML结构 #

将内容包裹在内部容器中，方便判断宽度：

<div class="myClass">
  <span class="text-content">你的日文内容...</span>
</div>

2. CSS样式 #

.myClass {
  overflow: hidden;
  white-space: nowrap;
  max-width: 200px; /* 根据需求设置宽度 */
  position: relative;
  background: #ffffff;
}

/* 仅当内容溢出时显示省略号 */
.myClass.show-ellipsis::after {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
  background: inherit;
  padding-left: 4px; /* 避免省略号与末尾文字重叠 */
}

3. JS逻辑 #

监听内容宽度与容器宽度的差值，动态切换样式：

// 检查并控制省略号显示
function toggleEllipsis() {
  document.querySelectorAll('.myClass').forEach(container => {
    const content = container.querySelector('.text-content');
    // 比较内容实际宽度与容器可视宽度
    const isOverflow = content.scrollWidth > container.clientWidth;
    container.classList.toggle('show-ellipsis', isOverflow);
  });
}

// 初始化执行
toggleEllipsis();
// 窗口大小变化时重新检查
window.addEventListener('resize', toggleEllipsis);

优势：仅在内容确实溢出时显示省略号，完美适配各种场景，且省略号为自定义的英文三点，不受日文字体影响。

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