要将超出容器的文本显示为省略号(...),你可以使用CSS的text-overflow: ellipsis
属性。请确保为需要应用此样式的元素设置white-space: nowrap
和overflow: hidden
。一定设置宽度,以下是一个例子:
一、单行
<template>
<div class="text">
这是一段很长的文字,超出容器宽度的部分将被替换为省略号。
</div>
</template>
<style>
.text {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
二、多行
.text {
width: 200px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里的数字表示你想显示的行数 */
overflow: hidden;
text-overflow: ellipsis;
}
在这个例子中,.text
类的元素将会限制在200像素的宽度内,并显示两行文本。超过两行的文本将被替换为省略号。你可以通过调整-webkit-line-clamp
属性的值来改变显示的行数。