基于vue简易多行文本组件的实现_vue 实现平行三列-CSDN博客

本文链接：https://blog.csdn.net/weixin_47232046/article/details/113655845

本文介绍了一种在前端实现文本展开与收起效果的方法，通过判断文本长度并结合JavaScript和CSS来达到预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近碰到一个业务需求，描述文字超过3行的话，要在最后显示展开按钮，点击展开后显示所有文本，咋一看挺简单的，但是分析了一下其实还是有挺多东西需要考虑到的
效果大概这样
收起
在这里插入图片描述
展开

最开始想偷个懒，用css来做，使用-webkit-line-clamp属性来实现。
-webkit-line-clamp用来限制在一个块元素显示的文本的行数，结合text-overflow可以非常简单的用css实现收起的效果

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

效果是这样的
在这里插入图片描述
然后展开就把-webkit-line-clamp属性去掉就可以了，但是问题来了，需求要求展开的按钮一定要和文字在同一行，用这个属性没有办法控制最后一行的长度，文字把按钮的位置占用了，所以没办法，只能老老实实用js来写了

大概有这么几个点

判断文字的长度，是否需要展开
根据3行文本的长度，截取收起时的文字
判断展开后的文字，是否会占用到按钮的位置，如果占用的话，按钮就要显示在下一行

接下来就是实现了，项目用的是vue，不过整体的思路是差不多的，无非是语法有一些变化

<template>
  <div class="m_text">
    <div ref="temp" class="temp">
      {
   {
    text }}
    </div>
    
    <div v-if="needExpend">
      <div v-if="!expend" class="text">
        {
   {
    shortText }}
        <span class="expend_btn" @click="showMore">更多</span>
      <