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

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

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
1
2
3

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

:title="content"
1

完整代码：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

.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;
}
1
2
3
4
5
6
7
8
9
10
11
12

<div class="goods-name text-over-two">
	{{ goodsName }}
</div>
.goods-name {
    max-width: 256px;
}
1
2
3
4
5
6