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

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

Recommend

Basic tutorial on using explain statement in MySQL

Table of contents 1. Overview 1. Explain statemen...

A simple way to restart QT application in embedded Linux (based on QT4.8 qws)

Application software generally has such business ...

Implementing a simple timer based on Vue method

Vue's simple timer is for your reference. The...

Pull-down refresh and pull-up loading components based on Vue encapsulation

Based on Vue and native javascript encapsulation,...

Vue.js implements simple timer function

This article example shares the specific code of ...

How to install Linux online software gcc online

Linux online installation related commands: yum i...

How to set Tomcat as an automatically started service? The quickest way

Set Tomcat to automatically start the service: I ...

Analysis of the reasons why the index does not take effect when searching in the MySql range

1 Problem Description This article sorts the esta...

Share 9 Linux Shell Scripting Tips for Practice and Interviews

Precautions 1) Add interpreter at the beginning: ...

How to solve the slow speed of MySQL Like fuzzy query

Question: Although the index has been created, wh...

Some pitfalls of JavaScript deep copy

Preface When I went to an interview at a company ...

VMware virtual machine installation CentOS 8 (1905) system tutorial diagram

The world-famous virtual machine software VMware-...

Detailed explanation of three ways to wrap text in el-table header

Table of contents Problem Description Rendering T...

How to implement cross-domain API proxy forwarding through Nginx proxy forwarding configuration

Preface In WEB development, we often involve cros...

WeChat applet picker multi-column selector (mode = multiSelector)

Table of contents 1. Effect diagram (multiple col...