A brief analysis of CSS3 using text-overflow to solve text layout problems
|
Basic syntax text-overflow: clip;ellipsis;string
<!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
In-depth explanation of closure in JavaScript
Introduction Closure is a very powerful feature i...
Interpretation of Vue component registration method
Table of contents Overview 1. Global Registration...
About the difference between inspecting elements and viewing the source code of a web page
I don’t know if you have noticed that when we ope...
How to deal with the xfs_vm_releasepage warning problem reported by the Linux system
Problem Description Several machines recently dis...
Solution to docker suddenly not being accessible from the external network
According to the methods of the masters, the caus...
Detailed explanation of CSS3 elastic expansion box
use Flexible boxes play a vital role in front-end...
Login interface implemented by html+css3
Achieve results First use HTML to build a basic f...
Solve the problem of Nginx returning 404 after configuring proxy_pass
Table of contents 1. Troubleshooting and locating...
React implements paging effect
This article shares the specific code for React t...
How to deploy k8s in docker
K8s k8s is a cluster. There are multiple Namespac...
Detailed explanation of the solution to the failure of VMware to open the module diskearly
VMWare (Virtual Machine ware) is a "virtual ...
Detailed explanation of how to detect and prevent JavaScript infinite loops
Table of contents Preface Fix infinite loop in fo...
MySQL gets the current date and time function
Get the current date + time (date + time) functio...
Description and use of table attributes CellPad, CellSpace and Border in web page production
cellspacing is the distance between cells in the t...
Collection of 12 practical web online tools
1. Favicon.cc To create ico icon websites online,...