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

How to configure /var/log/messages in Ubuntu system log

1. Problem Description Today I need to check the ...

About the problem of vertical centering of img and span in div

As shown below: XML/HTML CodeCopy content to clip...

Introduction to the use of alt and title attributes of HTML img tags

When browser vendors bend the standards and take i...

HTML uses marquee to achieve text scrolling left and right

Copy code The code is as follows: <BODY> //...

How to write beautiful HTML code

What Beautiful HTML Code Looks Like How to write ...

How to use wangEditor in vue and how to get focus by echoing data

Rich text editors are often used when doing backg...

Solve the MySQL 5.7.9 version sql_mode=only_full_group_by problem

MySQL 5.7.9 version sql_mode=only_full_group_by i...

Summary of how to modify the root password in MySQL 5.7 and MySQL 8.0

MySQL 5.7 version: Method 1: Use the SET PASSWORD...

Example code for evenly distributing elements using css3 flex layout

This article mainly introduces how to evenly dist...

How to modify the password of MySQL 5.1 and remotely log in to the MySQL database

Create a mysql user and authorize: Format: grant ...

Detailed example of using case statement in MySQL stored procedure

This article uses an example to illustrate the us...

JS deep and shallow copy details

Table of contents 1. What does shallow copy mean?...

Six weird and useful things about JavaScript

Table of contents 1. Deconstruction Tips 2. Digit...

CentOS system rpm installation and configuration of Nginx

Table of contents CentOS rpm installation and con...

Detailed explanation of the usage of sync modifier in Vue3 parent-child component parameter transfer

Table of contents One-way data flow explanation V...