Javascript 使用onclick功能显示省略号，仅显示长内容

我需要缩短长段落，以便只显示一行，并在末尾显示“省略号”（某种形式）（使用CSS、JS、JQuery…），但我发现还有三个附加条件很难满足：

• 省略号上应该有显示和隐藏的点击事件 剩余内容（这对于一系列教程来说相对容易 （在互联网上）
• 省略号应该看起来像一个按钮（即不是纯文本“…”， 理想情况下为独立html元素）
• 当且仅当内容太多时，省略号才可见 长时间显示在一行上（这是我正在努力解决的部分）

这里是我想要的：满足前两个条件，但我需要第二个省略号（用红色文本显示）不显示（因为相应的文本足够短，可以放在一行上）

另一方面，我可以使用CSS

文本溢出：省略号

参数，但在这种情况下，我无法使省略号可单击并更改其布局

---

编辑：为了澄清，数据（段落文本）是动态加载的（从内部服务获取，通过Vue.js处理，并通过

v-for

显示），因此我不能只渲染页面，查看哪些行太长，然后从这些行中删除按钮。我试图使fiddle中的代码尽可能容易阅读，因此我避免调用外部服务来加载文本，并使用Vue.js从代码中删除足够短且不需要省略号按钮的文本：

  <button class="ellipsis" style="color: red">
    Show
  </button>

显示

---

发布您的一些代码将有所帮助

如果您能分享否决投票的原因，那就太好了，这样我就可以避免再次犯同样的错误了，因为页面不是静态的（页面的文本是从DB加载的），所以我无法轻易判断哪些文本足够短，哪些太长。至于代码：你在fiddle中缺少什么特别的东西吗？你链接到的fiddle是静态的，你在开发一个动态加载的页面上请求帮助。您如何获取数据？您提供的越多，帮助就越容易。数据通过JQuery请求加载到另一个内部服务，然后通过Vue.js进行处理并显示。我尽量让这件事尽可能简单，因此我避免调用其他服务（并使用vue），因为我不知道这对事物的表示方面有什么帮助。这几乎就像你需要迭代数据集并检查被检索的每个项目的长度一样。然后，如果超过某个长度，则向该项附加一个类。设置一个CSS类来处理省略号按钮和展开。听起来是这样吗？这可能是一种方法。这里的（一）个问题是，我现在知道如何检查元素的长度（不能根据字符数进行检查，因为“I”的长度与“m”不同），并且通过JQuery获取它也有问题，因为它的宽度设置为flex to parent element。如果你能解决这个问题，你介意分享代码吗？