uni-app 中 text-overflow: ellipsis 单行省略无效，因小程序平台（尤其微信）不支持该 CSS 组合，H5 虽部分支持但跨端不一致；可靠方案是用 JavaScript 控制截断+显隐逻辑，配合 view 组件与 createSelectorQuery 动态检测高度。
uni-app 中用 text-overflow: ellipsis 做单行省略为什么无效？
因为 uni-app 的 <text> 组件在小程序平台（尤其是微信）不支持 text-overflow 和 white-space: nowrap 的 CSS 组合；H5 平台虽部分支持，但跨端一致性差，直接写 CSS 省略大概率只在 H5 生效，真机调试时发现小程序里文字照常撑开、没省略。
真正跨端可靠的方案是：用 JavaScript 控制文本截断 + 显隐逻辑，配合 v-if 或 v-show 切换状态。
- 优先用
<view>包裹文字，不用<text>——<view>支持更多 CSS 属性且渲染更稳定 - 避免依赖
line-clamp（iOS Safari 低版本、微信小程序基础库 - 不要在
onLoad阶段就截断，需等 DOM 渲染完成（用nextTick或setTimeout微调）
如何用 uni.createSelectorQuery() 动态判断是否需要展开按钮？
不能靠字符数粗略判断（中英文、emoji、字体宽度不同），得真实测量容器高度。核心思路：先渲染完整文本 → 测量实际高度 → 对比行高 × 行数阈值 → 决定是否显示“展开”按钮。
示例关键代码：
data() {
return {
fullText: '这里是超长的描述文字……',
showFull: false,
needExpand: false
}
},
mounted() {
this.checkOverflow()
},
methods: {
checkOverflow() {
const query = uni.createSelectorQuery().in(this)
query.select('#text-container').boundingClientRect()
query.exec((res) => {
if (!res[0]) return
const { height } = res[0]
// 假设每行约 24px，最多显示 2 行 → 阈值 48px
this.needExpand = height > 48
})
}
}
- 必须用
uni.createSelectorQuery()，document.querySelector在小程序里不存在 -
exec是异步的，别在exec外部直接读this.needExpand - 行高阈值建议写成变量（如
lineHeight: 24,maxLines: 2），方便后续调整
v-if 还是 v-show 控制展开/收起？
用 v-if 更合适。因为收起状态下，你通常只渲染前 N 行（比如 40 字），而展开后才加载完整文本；如果用 v-show，完整文本始终在 DOM 里，对长列表页的内存和首屏性能有影响。
典型结构：
<view id="text-container">
<view v-if="!showFull">
{{ fullText.substring(0, 40) }}...
</view>
<view v-else>
{{ fullText }}
</view>
<view v-if="needExpand" @click="showFull = !showFull">
{{ showFull ? '收起' : '展开' }}
</view>
</view>
- 注意：不要把
substring逻辑写在模板里，应提前计算好shortText存入 data，避免重复计算 - 点击“展开”后记得再调一次
checkOverflow（比如用户缩放屏幕或横竖屏切换），否则收起时可能误判 - 按钮文案建议加个图标（如
<text class="icon-down">），纯文字在小屏上点击热区太小
微信小程序里 uni.createSelectorQuery() 拿不到高度？
常见原因是节点还没渲染出来，或者用了 display: none、v-if 为 false 的父容器包裹目标元素。最稳做法是：确保目标 <view id="text-container"> 始终存在（哪怕内容为空），且没有被条件渲染隐藏。
- 把
id放在最外层容器上，不要放在v-if内部的子节点 - 如果文本是异步加载的（比如从 API 获取），要在
then里调用checkOverflow，而不是仅靠mounted - 基础库低于 2.10.0 的微信小程序，
boundingClientRect可能返回null，可加降级：fallback 到按字符数估算（fullText.length > 80）
跨端省略不是“写个 CSS 就完事”的事，真实场景里要同时扛住字体差异、动态内容、小程序渲染时机、基础库碎片化——最麻烦的往往不是展开逻辑，而是怎么让“判断是否溢出”这件事本身，在所有平台都可靠跑通。
