uni-app中，固定宽高，文字超出部分，隐藏并显示省略号。
<div class="cnblogs_code"><pre><span style="color: rgba(0, 0, 0, 1)"><img src="https://img2020.cnblogs.com/blog/1665938/202004/1665938-20200426155812912-2129693354.png" alt=""></span></pre>
<p> </p>
<pre><span style="color: rgba(0, 0, 0, 1)"></span></pre>
<p> </p>
<pre><span style="color: rgba(0, 0, 0, 1)"><br>.topic_cont_text{
padding: 30upx;
colof: #</span><span style="color: rgba(128, 0, 128, 1)">999</span><span style="color: rgba(0, 0, 0, 1)">;
background: #E1FFFF;
max</span>-<span style="color: rgba(0, 0, 0, 1)">height: 130upx;
overflow: hidden;
word</span>-<span style="color: rgba(0, 0, 255, 1)">break</span>: <span style="color: rgba(0, 0, 255, 1)">break</span>-all;<span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> break-all(允许在单词内换行。) </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
text</span>-overflow: ellipsis;<span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 超出部分省略号 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
display: </span>-webkit-box; <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">* 对象作为伸缩盒子模型显示 *</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
-webkit-box-orient: vertical; <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">* 设置或检索伸缩盒对象的子元素的排列方式 *</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
-webkit-line-clamp: <span style="color: rgba(128, 0, 128, 1)">2</span>; <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">* 显示的行数 *</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
} </span></pre>
</div>
<div class="cnblogs_code">
<pre><view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">topic_content</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
<view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">topic_cont_text</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
<template v-<span style="color: rgba(0, 0, 255, 1)">if</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">showText</span><span style="color: rgba(128, 0, 0, 1)">"</span>><span style="color: rgba(0, 0, 0, 1)">
{{topicDetail.description}}
</span><text v-<span style="color: rgba(0, 0, 255, 1)">if</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">topicDetail.description !== null && topicDetail.description.length > 140</span><span style="color: rgba(128, 0, 0, 1)">"</span> <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">full_text</span><span style="color: rgba(128, 0, 0, 1)">"</span> @click=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">toggleDescription</span><span style="color: rgba(128, 0, 0, 1)">"</span>>收起</text>
</template>
<template v-<span style="color: rgba(0, 0, 255, 1)">else</span>><span style="color: rgba(0, 0, 0, 1)">
{{topicDetail.description.substr(</span><span style="color: rgba(128, 0, 128, 1)">0</span>, <span style="color: rgba(128, 0, 128, 1)">140</span><span style="color: rgba(0, 0, 0, 1)">)}}
</span><text v-<span style="color: rgba(0, 0, 255, 1)">if</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">topicDetail.description !== null && topicDetail.description.length > 140</span><span style="color: rgba(128, 0, 0, 1)">"</span> <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">full_text</span><span style="color: rgba(128, 0, 0, 1)">"</span> @click=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">toggleDescription</span><span style="color: rgba(128, 0, 0, 1)">"</span>>全文</text>
</template>
</view>
</view>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 全文展开收起</span>
<span style="color: rgba(0, 0, 0, 1)">toggleDescription (num) {
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.showText = !<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.showText
}, </span></pre>
</div>
<p>转载：https://blog.csdn.net/qq_41287423/article/details/98597276</p>
</div>
<div id="MySignature" role="contentinfo">
<div id="AllanboltSignature">
<div><span style="font-weight:700;color:#3a416f;">本文作者：</span>___mouM</div>
<div><span style="font-weight:700;color:#3a416f;">本文出处：</span>https://www.cnblogs.com/aknife/</div>
<div><span style="font-weight:700;color:#3a416f;">声援博主：</span>如果您觉得文章对您有帮助，可以点击文章右下角<span style="color:#5c8ec6">【推荐】</span>一下。</div>
<div><span style="font-weight:700;color:#3a416f;">版权说明：</span>本文版权归作者和博客园共有，欢迎转载。但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利.</div>
</div><br><br>
来源：https://www.cnblogs.com/aknife/p/12780167.html
頁:
[1]