显示带有省略号的省略号，只显示长内容

Question

我需要缩短长段，以仅显示一行，并在末尾显示“省略号”（使用CSS，JS，JQuery ...），但是我发现很难满足另外三个条件满足：

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

这里几乎是我想要的东西：https://jsfiddle.net/Drecker/3gv4tkL9/2/满足前两个条件，但是我需要不显示第二个省略号（用红色文字显示）（因为相应的文字足够短以适合单行）。

另一方面，我可以使用CSS text-overflow: ellipsis参数，但是在这种情况下，我无法使省略号可点击并更改其布局。

编辑：为清楚起见，数据（段落文本）是动态加载的（从内部服务获取，通过Vue.js处理，并通过v-for显示），所以我不能仅渲染页面，查看哪些行太长，然后从此类行中删除按钮。我试图使小提琴中的代码尽可能易于阅读，因此避免了调用外部服务来加载文本和使用Vue.js

Answer 1

从代码中删除所有简短且不需要省略号按钮的文本：

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

发布一些代码会有所帮助