The text of uni-app is displayed in two lines and is indicated by ellipses if it exceeds
Vue displays a large string of text in two lines and uses ellipsis to indicate the excess.
Set text through css to force non-breaking of lines beyond the ellipses:
{
white-space: nowrap; 文本强制不换行；
text-overflow:ellipsis; 文本溢出显示省略号；
overflow:hidden; 溢出的部分隐藏；
}
image.png
If you want to display more than two lines, use ellipsis:
text {
height: 35px;
font-size: 12px;
transform: scale(0.9);
transform-origin: 0 0;
// -webkit-transform-origin-x: 0;
// -webkit-transform: scale(0.01);
// 设置为两行。当文本内容超过两行时，将会自动隐藏多余的部分
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
-webkit-line-clamp is used to limit the number of lines of text displayed in a block element. In order to achieve this effect, it needs to be combined with other WebKit properties.
Commonly combined attributes:
1. display: -webkit-box; must be combined with the attributes to display the object as a flexible box model.
2. -webkit-box-orient must be combined with the attribute to set or retrieve the arrangement of the child elements of the flex box object.
3. text-overflow: ellipsis; can be used in the case of multi-line text, using the ellipsis "..." to hide the text that exceeds the range.