超出容器范围的文字部分显示省略号，鼠标放上去时显示完整内容

安安安安安沅

已于 2023-09-14 10:22:17 修改

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue css

于 2021-09-09 16:46:42 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37899622/article/details/120204131

vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何使用CSS实现文本超出容器时显示省略号的效果，包括`overflow`, `text-overflow`, 和 `white-space` 属性的使用，以及针对多行文本的`text-over-two`样式。同时展示了如何为元素添加title属性以提供更多信息。

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

①设置css，使其超出容器范围的文字部分显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

②给标签添加title属性，并赋上要显示的内容

:title="content"

完整代码：

<template>
  <div class="node-content" :title="content" style="width: 200px; height: 20px;">{{ content }}</div>
</template>

<script>
export default {
  data () {
    return {
      content: 'voudbfrwe9ugivhrntmvfpocpocpocpocpocpocpocdequvcrhnbjeiqnfchibncvcvcgbvfjwqfd293fimrvnucdexkwmsu3m8dm34hfrvghmgy75fhy4mnhjwxudwejfgm3409u8tm7fuqdjpoewmjcdomreughrumgu48mfjdwpepmfiurengwoijfgmrpmigumprgh4938ythfruenhgwedpqmxudnqhcyfmuevgnrepgurtgijwpoei493fjowhqcnfegioheofrnm34my78ftnhwjfmweognhytnghhhhfesmufhruefghrt84gy47tnhurdjfgrunyw7ry4n738thn54ugy758yjguweijyrhioeghbvtrg3rhyyyyyyyyyyncryuryu2vnhceuoidxjqeefnhui'
    }
  }
}
</script>

<style lang="scss" scoped>
.node-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

文本超出一行或多行显示省略号(要设置宽度)

.text-over {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.text-over-two {
	display: -webkit-box !important;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

<div class="goods-name text-over-two">
	{{ goodsName }}
</div>
.goods-name {
    max-width: 256px;
}