css - 如何使文本溢出省略号 3 点可点击？

问题描述

我想问一下 CSS 属性text-overflow: ellipsis有 3 个点是否可以点击。

实际上，我使用 vuejs 作为前端，我有一个场景，文本较长，但我不希望文本中断，而是应该在一行中，现在我想要这个 CSS 属性解决了这个问题，如果这个3 个点保持一秒钟，然后它应该显示其余的文本。

或者，如果我们单击这 3 个点，则将显示其余的单词。

可以在 vuejs 中完成吗？

任何有关示例的帮助将不胜感激

提前致谢！

标签： cssvue.js

我想你需要这个

new Vue({
  el: '#app',
  data() {
    return {
      showLess: true
    }
  }
});

.text-overflow-handle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div ref="text" @click="showLess = !showLess" :class="{'text-overflow-handle': showLess}">What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has?</div>
</div>

css - 如何使文本溢出省略号 3 点可点击？

问题描述

解决方案

推荐阅读