New settings for text and fonts in CSS3

New settings for text and fonts in CSS3

Text Shadow

text-shadow: horizontal offset vertical offset blur color

Compatibility: IE10+

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    p{
        color:blue;
        text-shadow: 3px 3px 3px black;
    }

</style>
</head>
<body>
    <p>This is a test text</p>
</body>
</html>

CSS3 Line Break

word-break: normal | break-all | keep-all

For English text: normal and keep-all have the same effect; break-all means that letters break into lines without considering the impact of words

For Chinese text: normal and break-all have the same effect; keep-all means wrapping according to punctuation marks

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    p{width:500px;}
    span{background:#abcdef;}
    p:nth-child(1){word-break:normal;}
    p:nth-child(2){word-break:break-all;}
    p:nth-child(3){word-break:keep-all;}

    p:nth-child(5){word-break:normal;}
    p:nth-child(6){word-break:break-all;}
    p:nth-child(7){word-break:keep-all;}
</style>
</head>
<body>
    <p><span>[word-break:normal]</span> I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.</p>
    <p><span>[word-break:break-all]</span> I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.</p>
    <p><span>[word-break:keep-all]</span> I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.</p>
<hr>
    <p><span>[word-break:normal]</span> I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident that all men are created equal." I have a dream that one day on the red hills of Georgia the heirs of former slaves and the heirs of former slave owners will be able to sit down together at the table of brotherhood. </p>
    <p><span>[word-break:break-all]</span> I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident that all men are created equal." I have a dream that one day on the red hills of Georgia the heirs of former slaves and the heirs of former slave owners will be able to sit down together at the table of brotherhood. .</p>
    <p><span>[word-break:keep-all]</span> I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident that all men are created equal." I have a dream that one day on the red hills of Georgia the heirs of former slaves and the heirs of former slave owners will be able to sit down together at the table of brotherhood. </p>
</body>
</html>

word-wrap for consecutive long English words or URLs (not valid for Chinese)

word-wrap:normal | break-word;

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    p{width:200px;}
    span{background:#abcdef;}
    p:nth-child(1){word-wrap:normal;}
    p:nth-child(2){word-wrap:break-word;}
</style>
</head>
<body>
    <p><span>[word-wrap:normal]</span> <br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p><span>[word-wrap:break-word]</span> <br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

</body>
</html>

text-align-last How to align the last line of text

Only IE supports it, Firefox needs to add the -moz- prefix, Google 50+ supports it

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    p{width:800px;}
    span{background:#abcdef;}
    p:nth-child(1){text-align-last:auto;}
    p:nth-child(2){text-align-last:left;}
    p:nth-child(3){text-align-last:right;}
    p:nth-child(4){text-align-last:center;}
    p:nth-child(5){text-align-last:justify;}
    p:nth-child(6){text-align-last:start;}
    p:nth-child(7){text-align-last:right;}
    p:nth-child(8){text-align-last:initial;}
    p:nth-child(9){text-align-last:inherit;}
</style>
</head>
<body>
    <p><span>auto</span>HTML is called Hypertext Markup Language, which is an identification language. It consists of a series of tags. These tags can be used to unify the document format on the network and connect scattered Internet resources into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can describe text, graphics, animation, sound, table, link, etc. </p>
    <p><span>left</span>HTML is called Hypertext Markup Language, which is a identification language. It consists of a series of tags. These tags can be used to unify the document format on the network and connect scattered Internet resources into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can describe text, graphics, animation, sound, table, link, etc. </p>
    <p><span>right</span>HTML is called Hypertext Markup Language, which is a identification language. It consists of a series of tags. These tags can be used to unify the document format on the network and connect scattered Internet resources into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can describe text, graphics, animation, sound, table, link, etc. </p>
    <p><span>center</span>HTML is called Hypertext Markup Language, which is an identification language. It consists of a series of tags. These tags can be used to unify the document format on the network and connect scattered Internet resources into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can describe text, graphics, animation, sound, table, link, etc. </p>
    <p><span>justify</span>HTML is called Hypertext Markup Language, which is a marking language. It consists of a series of tags. These tags can be used to unify the document format on the network and connect scattered Internet resources into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can describe text, graphics, animation, sound, table, link, etc. </p>
    <p><span>start</span>HTML is called Hypertext Markup Language, which is a identification language. It consists of a series of tags. These tags can be used to unify the document format on the network and connect scattered Internet resources into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can describe text, graphics, animation, sound, table, link, etc. </p>
    <p><span>end</span>HTML is called Hypertext Markup Language, which is a marking language. It consists of a series of tags. These tags can be used to unify the document format on the network and connect scattered Internet resources into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can describe text, graphics, animation, sound, table, link, etc. </p>
    <p><span>initial</span>HTML is called Hypertext Markup Language, which is an identification language. It consists of a series of tags. These tags can be used to unify the document format on the network and connect scattered Internet resources into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can describe text, graphics, animation, sound, table, link, etc. </p>
    <p><span>inherit</span>HTML is called Hypertext Markup Language, which is an identification language. It consists of a series of tags. These tags can be used to unify the document format on the network and connect scattered Internet resources into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can describe text, graphics, animation, sound, table, link, etc. </p>

</body>
</html>

text-align-last is only valid when text-align:justify

text-overflow

When using, you need to set the element to overflow:hidden;

Invalid for Chinese, invalid for short English words, only valid for long English words

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{width:800px;overflow:hidden;}
    span{background:#abcdef;}
    div:nth-child(1){text-overflow:clip;}
    div:nth-child(2){text-overflow:ellipsis;}
    div:nth-child(3){text-overflow:">>";}
    div:nth-child(4){text-overflow:clip;}
    div:nth-child(5){text-overflow:ellipsis;}
    div:nth-child(6){text-overflow:">>";}
    div:nth-child(7){text-overflow:clip;}
    div:nth-child(8){text-overflow:ellipsis;}
    div:nth-child(9){text-overflow:">>";}
</style>
</head>
<body>
    <div><span>clip</span>HTML is called Hypertext Markup Language, which is a marking language. It consists of a series of tags. These tags can be used to unify the document format on the network and connect scattered Internet resources into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can describe text, graphics, animation, sound, table, link, etc. </div>
    <div><span>ellipsis</span>HTML is called Hypertext Markup Language, which is a identification language. It consists of a series of tags. These tags can be used to unify the document format on the network and connect scattered Internet resources into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can describe text, graphics, animation, sound, table, link, etc. </div>
    <div><span>string</span>HTML is called Hypertext Markup Language, which is an identification language. It consists of a series of tags. These tags can be used to unify the document format on the network and connect scattered Internet resources into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can describe text, graphics, animation, sound, table, link, etc. </div>

    <div><span>clip</span>I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.</div>
    <div><span>ellipsis</span>I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.</div>
    <div><span>string</span>I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.</div>

    <div><span>clip</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div><span>ellipsis</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div><span>string</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>


</body>
</html>

text-overflow:clip; hide

text-overflow:ellipsis; ellipsis

text-overflow: string; specifies characters, only valid in Firefox

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{width:800px;overflow:hidden;}
    span{background:#abcdef;}
    div:nth-child(1){text-overflow:clip;}
    div:nth-child(2){text-overflow:ellipsis;}
    div:nth-child(3){text-overflow:">>";}
    div:nth-child(4){text-overflow:clip;}
    div:nth-child(5){text-overflow:ellipsis;}
    div:nth-child(6){text-overflow:">>";}
    div:nth-child(7){text-overflow:clip;}
    div:nth-child(8){text-overflow:ellipsis;}
    div:nth-child(9){text-overflow:">>";}
</style>
</head>
<body>

    <div><span>clip</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div><span>ellipsis</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div><span>string</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>


</body>
</html>

overflow: visible | hidden | scroll | auto | inherit

Show hidden text on mouse hover

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{width:800px;overflow:hidden;text-overflow:ellipsis;}
    div:hover{overflow:visible;}
</style>
</head>
<body>

    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>


</body>
</html>

@font-face compatibility IE9+

Font Format

TrueType .ttf no optimization compatibility IE9+

OpenType .otf is an upgraded version of ttf and is not compatible with IE

The best font format for the .woff web version is the compressed format of TrueType/OpenType, which is compatible with IE9+ but not compatible with mobile phones!

.eot IE-specific font format

.svg svg font format is not compatible with IE and Firefox

Custom font generic template

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    @font-face{
        font-family:"myFont";
        src:url('font/myFont.eot'),/*Compatible with IE9+*/
            url('font/myFont.eot?#iefix') format('embedded-opentype'),/*Compatible with IE6-8*/
            url('font/myFont.ttf') format('truetype'),/*compatible with mobile phones*/
            url('font/myFont.woff') format('woff'),/*compatible with all browsers*/
            url('font/myFont.svg#myFont') format('svg');/*Developed for ios*/

    }
    p{font-family: 'myFont';} </style> </head> <body> <p>This is my custom font~</p> </body></html>

Website for obtaining special fonts: https://www.fontsquirrel.com/tools/webfont-generator

Because it is a foreign server, the download speed is relatively slow

Note: I have personally discovered that the font formats converted by this software only support the English version

It is recommended to use other domestic online conversion tools or websites

Font Files 

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    @font-face {
        font-family: 'Yang Rendong Bamboo and Stone';
        src:url('myfont/杨任东竹石体.eot'),/*Compatible with IE9+*/
            url('myfont/杨任东竹石体.eot?#iefix') format('embedded-opentype'),/*Compatible with IE6-8*/
            url('myfont/杨任东竹石体.ttf') format('truetype'),/*compatible with mobile phones*/
            url('myfont/杨任东竹石体.woff') format('woff'),/*Compatible with all browsers*/
            url('myfont/杨任东竹石体.svg#杨任东竹石体') format('svg');/*Developed for ios*/
    }
    p{font-family: 'Yang Rendong Bamboo and Stone';font-size:24px;}
</style>
</head>
<body>

    <p>HELLO THIS IS MY FONT~This is my custom font~</p>

</body>
</html>

Success~~~

Summarize

The above is what I introduced to you about the new text and font settings in CSS3. I hope it will be helpful to you!

<<:  Some indicators of excellent web front-end design

>>:  This article will help you get started and understand the basic operations of Jquery

Recommend

Analyze how to automatically generate Vue component documentation

Table of contents 1. Current situation 2. Communi...

Let's talk in detail about how the NodeJS process exits

Table of contents Preface Active withdrawal Excep...

Configuring MySQL and Squel Pro on Mac

In response to the popularity of nodejs, we have ...

Pure JavaScript to implement the number guessing game

Develop a number guessing game that randomly sele...

Vue implements form data validation example code

Add rules to the el-form form: Define rules in da...

Vue monitoring properties and calculated properties

Table of contents 1. watch monitoring properties ...

MySQL learning summary: a preliminary understanding of the architectural design of the InnoDB storage engine

1. Storage Engine In the last section, we mention...

Introduction to setting up Tomcat to start automatically on Linux system

1. Enter the /etc/init.d directory: cd /etc/init....

How to hide the text in the a tag and display the image? Compatible with 360 mode rendering

Often you will encounter a style of <a> tag ...

A simple method to regularly delete expired data records in MySQL

1. After connecting and logging in to MySQL, firs...

Three examples of nodejs methods to obtain form data

Preface Nodejs is a server-side language. During ...

Detailed explanation of various types of image formats such as JPG, GIF and PNG

Everyone knows that images on web pages are genera...

An article to help you understand jQuery animation

Table of contents 1. Control the display and hidi...

JavaScript implements three common web effects (offset, client, scroll series)

Table of contents 1. Element offset series 2. Ele...

Manually implement the two-way data binding principle of Vue2.0

In one sentence: Data hijacking (Object.definePro...