text-overflow fully compatible CSS code for text overflow

Not much nonsense, the following code can run in all browsers, including IE8. As for the minimum compatibility between Google and Firefox, I haven't tested this.

<style>
.IE_clamp{
	white-space: nowrap; 
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	display: -moz-box;
	display:block;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	}
</style>


The length needs to be set by yourself. This style only supports a single line. If the Google kernel can achieve the effect of displaying a few lines of overflow by setting the number after -webkit-line-clamp, you can test it yourself.

Note: In some methods on the Internet, there will be more word-break styles, but this style will prevent IE from displaying text overflow, so it cannot be introduced.

Below is a rough screenshot of the compatibility test I did.

Here's Google:


Here's Firefox:


Here is the edge:


IE7:


IE8:


IE9:


IE10:


IE11:



Guess you like

Origin blog.csdn.net/QiZi_Zpl/article/details/77679238