vue css 文本溢出显示省略号、失效相关问题整理

作者：System 时间：2024年08月14日分类：所有,css3 字数：594

这篇文章距离上次修改已过443天，其中的内容可能已经有所变动。

在Vue中，处理文本溢出显示省略号可以通过CSS样式来实现。以下是一个简单的例子：




<template>
  <div class="text-overflow">
    这是一段很长的文本，需要显示省略号...
  </div>
</template>
 
<style>
.text-overflow {
  width: 200px; /* 定义容器宽度 */
  white-space: nowrap; /* 保持文本在一行内显示 */
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}
</style>

在这个例子中，.text-overflow 类定义了一个容器，在文本超出容器宽度时，会以省略号显示溢出的文本内容。

如果文本不应该响应鼠标事件，可以添加pointer-events: none属性，使得文本看起来是“失效”的。




.text-overflow {
  pointer-events: none; /* 防止文本响应鼠标点击等事件 */
  /* 其他样式保持不变 */
}

在这种情况下，文本看起来是“静态”的，不会响应用户的交互。

vue css 文本溢出显示省略号、失效相关问题整理

评论已关闭

推荐阅读