HTML text overflow is displayed with ellipsis

1. Single-line text overflow processing method

	/*强制文字一行内显示*/   //强制不换行
	white-space: nowrap; 
	/*溢出部分隐藏起来*/
	overflow: hidden;
	/*文本溢出时用省略号来显示*/
	text-overflow: ellipsis;

2. Multi-line text overflow processing method

    /*溢出部分隐藏起来*/	
    overflow: hidden;
    /*文本溢出时用省略号来显示*/
	text-overflow: ellipsis;
	/*弹性伸缩盒子模型显示*/
	display: -webkit-box;
	/*限制在一个块元素显示文本的行数*/
	-webkit-line-clamp: 2;/*2行*/
	/*设置或检索伸缩盒对象子元素的排列方式*/
	-webkit-box-orient: vertical;

Multi-line text overflows and displays an ellipsis, which has a major compatibility problem. It is suitable for webkit browsers or mobile terminals, and the size of the box must be set here, otherwise the effect will be affected.

Guess you like

Origin blog.csdn.net/weixin_64103049/article/details/127960708