小程序两行超出省略号出现在第一行

### 微信小程序中文本溢出解决方案

对于微信小程序中文字超出两行时，在第一行就出现省略号的问题，可以采用特定的 CSS 属性组合来实现。具体方法如下：

为了使文本在一行内显示并超出部分用省略号表示，需设置 `overflow`、`white-space` 和 `text-overflow` 这三个属性[^2]。

然而，针对两行的情况，则需要稍微不同的策略。可以通过以下方式实现在第二行结束处添加省略号的效果：

#### 使用 Flexbox 实现多行文本截断

通过结合Flex布局和伪类选择器`:after`创建一个多行文本截断效果。这种方法适用于现代浏览器环境下的微信小程序。

.multi-line-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 控制最大行数 */
    overflow: hidden;
}

此段代码确保了即使内容超出了指定的最大行数（此处设为2），也不会破坏原有布局结构而是优雅地被裁剪掉多余的部分，并附带省略标记提示用户存在更多未展示的内容[^3]。

需要注意的是 `-webkit-line-clamp` 是一个非标准属性，它只会在WebKit引擎上工作良好；幸运的是，这正好满足了微信小程序的需求因为其内部渲染机制基于 WebKit 浏览器核心。

另外一种更通用的方法是利用 JavaScript 动态计算文本高度并与容器的高度对比，如果发现实际所需空间大于设定值则手动插入省略符以及提供查看全部内容的功能链接或按钮。