A brief analysis of CSS3 using text-overflow to solve text layout problems

Basic syntax
The use of text-overflow requires the use of three attributes: hight, over-flow:hidden; white-space:nowrap;

text-overflow: clip;ellipsis;string
Clip: Hide directly without displaying
ellipse: Use three dots to indicate overflowing text (commonly used)
string: You can customize symbols to represent characters that cannot be placed

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.tf{
			width: 100px;
			height:50px;
			border:1px solid black;
			overflow: hidden;
			text-overflow: clip;/*If you just want to hide the text, it doesn't matter whether you add this sentence or not. height+overflow can directly hide the overflowing text*/
		}
		.tf1{
			width: 100px;
			border:1px solid black;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-text-overflow: ellipsis;
			white-space: nowrap;
			/*If using ellipsis attribute text-overflow:ellipsis; overflow: hidden;white-space: nowrap;
			 These three attributes are indispensable */
		}
	</style>
</head>
<body>
	<div class="tf">
		123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM.
	</div>

	<div class="tf1">
		123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM.
	</div>

	
</body>
</html>

This concludes this article on a brief analysis of how CSS3 uses text-overflow to solve text typesetting problems. For more relevant CSS3 text typesetting content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: Combining XML and CSS styles

>>: Solution to inconsistent display of cursor size in input box