需求：
未知字数的一段文本，最多显示4行；
超过四行，则文本溢出，显示展开按钮，展开后显示收起按钮
1.字数较少，不显示展开按钮
2.超过四行，文本溢出，显示展开
3.超出四行，展开后显示收起
多行文本溢出代码：
overflow: hidden;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 4;
text-overflow: ellipsis;
问题：文本内容达到溢出的条件怎么判断，现在是用文本的字数，比如105个字，超过105个字显示按钮，但显然不合理，求指导，谢谢
看了网上各种方案感觉都不灵活，发现其实很简单就能实现判断文本溢出的条件，就两个容器:
一个父容器来控制文本溢出显示省略号，让父容器默认overflow:hidden,一个内联子容器来放文本，
文本容器的高度>父容器的高度则说明溢出了具体可参考我写的总结，有完整代码，有新的方案和后续也会不定期补充，希望能帮助到大家：
【uni-app】微信小程序如何轻松判断文本溢出显示展开按钮
怎么样，楼主有用到什么比较好的解决方案吗？
本来如果一个页面只有一个需要这样展示的话就还可以用获取高度来判断。但是我的需求是在列表里面做，就不太好弄了。
我的也是要在循环列表里做 而且我的列表还是自定义组件 请问你是怎么解决的
我最后还是写了个组件，插入页面的时候就计算一下高度符不符合需要折叠的要求 用这个wx.createSelectorQuery().in(this).select('.text')
能具体点吗 我现在也是和你说的这么做 但是我的没出来效果
<text class="two-height"decode="{{true}}">事\n事</text><view class="motto"><text class="motto-text {{moreBtn ? 'show-all-' + show : ''}}">{{motto}}</text><view wx:if="{{moreBtn}}"class="show-more-btn"hiddem="{{!show}}"catchtap="toggleHandler">{{show ?'收起':'展开'}}</view></view>let twoLineHeight =null;Component({properties: {motto: {type: String,observer:function(newVal) {// 当它大于40的时候才需要判断if(newVal && newVal.length > 40) {// 设置一下延时，防止那些很卡的机子setTimeout(() => {this.getTextHeight();}, 100);}}}},data: {moreBtn:false,show:false},methods: {// 切换toggleHandler() {if(this.data.moreBtn) {this.setData({show: !this.data.show});}},getTextHeight() {this.getTwoLineHeight().then(lineHeight => {wx.createSelectorQuery().in(this).select('.motto-text').boundingClientRect(res => {// 如果签名内容高度大于计算出来的高度的话，那么就不止两行文字if(res.height > lineHeight) {this.setData({moreBtn:true});}}).exec();});},getTwoLineHeight() {if(twoLineHeight) {returntwoLineHeight;}else{twoLineHeight =newPromise(resolve => {wx.createSelectorQuery().in(this).select('.two-height').boundingClientRect(res => {if(res) {// 多加1/4防止溢出resolve(Math.ceil(res.height * 5 / 4));}else{// 如果获取失败了，就需要自己计算了// 首先获取系统屏幕宽度const systemW = wx.getSystemInfoSync().screenWidth;// 然后计算出一行的行高const lineHeight = (systemW * 28 / 750) * 1.5;// 再算两行半的高度，多出的1/2行算是溢出安全距离resolve(Math.ceil(lineHeight * 2.5));}}).exec();});returntwoLineHeight;}}}});我是这样写的，先获取到两行文字的高度，然后每次插入节点都判断一下节点内文本的高度，如果高度大于两行文字的高度的，则折叠
谢谢
<template> <!-- margin-bottom 是为了显示 展开文章后 的 收齐 --> <view class="common-article-wrap" :style="{'maxHeight':`${!isVisible ? 38*(maxShowLine + 1)+'rpx' : 'auto'}`,'overflow':`${!isVisible ? 'hidden' : 'visible'}`,'marginBottom':`${!isVisible ? '0rpx' : '38rpx'}`}"> <view class="common-article-body"> <text v-text="text"></text> </view> <view class="common-show-more-wrap"> <!-- 高度和文章的高度一致 --> <view class="placeholder-text-height"></view> <!-- 隐藏 高度是 h * lineheight 展开 是 文章高度 --> <view class="placeholder-text-line-height" :style="{'height':`${!isVisible ? 38*(maxShowLine)+'rpx' : '100%'}`}"></view> <!-- background 是隐藏文章 显示的 h + 1行 --> <view class="common-show-more" :style="{'backgroundColor':backgroundColor}" @tap="toggleVisible"> <text v-text="visibleText"></text> </view> </view> </view> </template> <script> // export default{ name:"CommonShowMore", data(){ return { isVisible:false, // 是否显示隐藏 maxShowLine:2, // 最大显示多少行 } }, computed:{ visibleText(){ return !this.isVisible ? '查看原文' : '收起' } }, methods:{ toggleVisible(){ this.isVisible = !this.isVisible; } }, props:{ // 显示的纯文本内容，不兼容z-index 比较高的内容 text:{ type:String, default:'' }, backgroundColor:{ type:String, default:"#FFFFFF" } } } </script> <style lang="scss"> $lineHeight:38rpx; .common-article-wrap{ overflow: hidden; font-size: 30rpx; line-height: $lineHeight; font-weight: 400; color:#3C3C3C; position: relative; .common-article-body{ &>text{ word-break: break-all; white-space: pre-wrap; hyphens: auto; } } .common-show-more-wrap{ position:absolute; top: 0; left: 0%; width: 100%; height: 100%; .placeholder-text-height{ float:right; height: 100%; width:1rpx; //width:1%; } .placeholder-text-line-height{ float:right; width:calc(100% - 1rpx); //width:99%; } .common-show-more{ float:left; width:calc(100% - 1rpx); //width:99%; height:$lineHeight; line-height:$lineHeight; z-index:2; color: #5B7DFE; } &:after{ clear:both; content:''; } } } </style>【使用 uni-app 做的，使用 css 的解决方案】【参考链接 https://www.cnblogs.com/wetest/p/7365676.html】
只要在默认加载页面的时候设置先设置为展开状态，这时候取了clienHeight进行判断，如果高过两行的高度这时候再收起。我这边的需求要展开按钮和文本末行同行，想不出怎么精准的按字节数切片
这么整肯定不行，我们项目里用了 展开收起文字功能，没发现谁的手机有问题
怎么解决？没超过文字不显示按钮
高度吧
这里是几种60个不间断的文本字符，100个汉字和100个数字所占的宽度或高度，相差很多的，还有各种标点符号，就算处理1个汉字等于2个字母数字，还是会不一样的
我就取的合适的值 就没出过事
小程序页面 字体大小/行高不好直接设置px，设计图750，那样会显得和其他页面格格不入，尤其是在小屏手机上，所以怎么计算好像都不靠谱，暂时项目需求直接去除了这个按钮
目前想到的只能将就试着用的方法：
估计四行能显示的字符长度，（但是汉字、数字、字母等所占宽度不完全一致），超出这个字数显示按钮，将这个字符数作为判断条件；
如果页面要求不高，可以考虑将文本字体、行高等用px写死，那样四行所占的高度是确定的，将这个高度作为判断条件；
如果 有心思，可以尝试将方法2进行屏幕适配
感谢给出回答的各位，后续如果有什么好的建议，希望不吝赐教
行高不是跟容器大小一样的么 比如容器大小为200rpx 那么行高为50 那就只能显示4行啊 获取当前容器只要超过200rpx就说明超高了 不过可能要转换一下 rpx 到 px
多谢，我再琢磨下，真不好处理的话，就只好字符个数来解决了