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

How to set remote access permissions in MySQL 8.0

Tutorial on adjusting the size of lvm logical volume partition in Linux (for different file systems such as xfs and ext4)

Blog

JS implements simple addition and subtraction of shopping cart effects

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

How to set remote access permissions in MySQL 8.0

Docker solves the problem that the terminal cannot input Chinese

The linkage method between menu and tab of vue+iview

MySQL 8.X installation tutorial under Windows

Introduction to Docker Architecture

Tutorial on adjusting the size of lvm logical volume partition in Linux (for different file systems such as xfs and ext4)

JS implements simple addition and subtraction of shopping cart effects

Solve the hierarchy problem of child element z-index and parent element sibling nodes in CSS

On good design

Tutorial on installing JDK Tomcat MySQL on Linux (remote access using Mac)

Recommend

MySQL multi-instance configuration solution

Vue+Element realizes paging effect

Detailed explanation of angular parent-child component communication

Solve the problem of failure to mount files or directories using ./ relative path in docker run

Kill a bunch of MySQL databases with just a shell script like this (recommended)

Detailed explanation of the pitfalls of MySQL 8.0

jQuery plugin to achieve seamless carousel

Tomcat maxPostSize setting implementation process analysis

Basic usage tutorial of IPTABLES firewall in LINUX

Three ways to parse QR codes using javascript

Detailed explanation of MySql slow query analysis and opening slow query log

PyTorch development environment installation tutorial under Windows

How to configure the pdflatex environment in docker

jQuery realizes the sliding effect of drop-down menu

MySQL gets the current date and time function