Cordova应用：实现带省略号的溢出文本可滚动功能

我明白你在混合移动应用里遇到的这个文本显示难题——既要让用户能滚动查看完整内容，又要在未滚动时在文本末尾显示省略号，之前的尝试没生效其实是有核心原因的：text-overflow: ellipsis 和 overflow: scroll 本身存在属性冲突：前者需要元素设置 overflow: hidden 才能触发省略号效果，而后者是让内容可滚动展示全部内容，这俩属性没法同时在同一个元素上生效。

咱们试试双层容器嵌套的方案，把省略号和滚动的功能拆分到不同元素上，就能完美解决这个问题：

第一步：调整HTML结构 #

在外层加一个容器负责显示省略号，内层保留原来的文本元素负责滚动：

<div class="col-xs-10 text-center">
  <div class="text-ellipsis-wrapper">
    <p class="profile-sport">This is sample text to see how long the line extends for.</p>
  </div>
</div>

第二步：修改CSS样式 #

分别给外层容器和内层文本元素设置对应的样式：

/* 外层容器：负责显示省略号 */
.text-ellipsis-wrapper {
  line-height: 50px;
  color: #888787;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  width: 100%; /* 确保容器宽度和父元素一致 */
}

/* 内层文本：负责滚动功能 */
.profile-sport {
  margin: 0;
  line-height: inherit;
  white-space: nowrap;
  overflow-x: scroll;
  /* 隐藏各平台的滚动条 */
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.profile-sport::-webkit-scrollbar {
  display: none;
}

第三步：优化滚动体验（可选） #

如果想在用户滚动时暂时隐藏省略号，滚动结束后（回到初始位置）再恢复，可以加一段简单的JS逻辑：

const scrollText = document.querySelector('.profile-sport');
const ellipsisWrapper = document.querySelector('.text-ellipsis-wrapper');

scrollText.addEventListener('touchstart', () => {
  // 开始滚动时，把省略号换成裁剪，避免遮挡文本
  ellipsisWrapper.style.textOverflow = 'clip';
});

scrollText.addEventListener('touchend', () => {
  // 滚动结束后，如果回到最左边，恢复省略号
  if (scrollText.scrollLeft === 0) {
    ellipsisWrapper.style.textOverflow = 'ellipsis';
  }
});

方案原理 #

外层容器设置 overflow: hidden 和 text-overflow: ellipsis，当内层文本宽度超出外层时，外层会自动显示省略号；而内层文本设置 overflow-x: scroll，允许用户横向滚动查看完整内容，两者的功能互不干扰，完美适配混合移动应用的场景。

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