欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3中新增的對(duì)文本和字體的設(shè)置

  發(fā)布時(shí)間：2020-02-03 09:26:55   作者：佚名   我要評(píng)論
這篇文章主要介紹了CSS3中新增的對(duì)文本和字體的設(shè)置,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

文字陰影

text-shadow: 水平偏移 垂直偏移 模糊 顏色

兼容性：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>這是一段測(cè)試文本鴨</p>
</body>
</html>

css3 換行

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

對(duì)于英文文本：normal 和 keep-all 效果相同；break-all 即字母和字母見換行，不考慮單詞的影響

對(duì)于中文文本：normal 和 break-all 效果相同；keep-all 即根據(jù)標(biāo)點(diǎn)符號(hào)換行

<!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> 我夢(mèng)想有一天，這個(gè)國家會(huì)站立起來，真正實(shí)現(xiàn)其信條的真諦：“我們認(rèn)為人人生而平等的真理不言而喻。”我夢(mèng)想有一天，在佐治亞的紅山上，從前奴隸的后嗣將能夠和奴隸主的后嗣坐在一起，共敘兄弟情誼。</p>
    <p><span>[word-break:break-all]</span> 我夢(mèng)想有一天，這個(gè)國家會(huì)站立起來，真正實(shí)現(xiàn)其信條的真諦：“我們認(rèn)為人人生而平等的真理不言而喻。”我夢(mèng)想有一天，在佐治亞的紅山上，從前奴隸的后嗣將能夠和奴隸主的后嗣坐在一起，共敘兄弟情誼。.</p>
    <p><span>[word-break:keep-all]</span> 我夢(mèng)想有一天，這個(gè)國家會(huì)站立起來，真正實(shí)現(xiàn)其信條的真諦：“我們認(rèn)為人人生而平等的真理不言而喻。”我夢(mèng)想有一天，在佐治亞的紅山上，從前奴隸的后嗣將能夠和奴隸主的后嗣坐在一起，共敘兄弟情誼。</p>
</body>
</html>

word-wrap 針對(duì)連續(xù)的英文長單詞或者url網(wǎng)址（中文無效）

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>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p><span>[word-wrap:break-word]</span> <br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

</body>
</html>

text-align-last 文本最后一行如何對(duì)齊

只有IE支持，火狐需要加-moz-前綴，谷歌50+支持

<!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稱為超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。</p>
    <p><span>left</span>HTML稱為超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。</p>
    <p><span>right</span>HTML稱為超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。</p>
    <p><span>center</span>HTML稱為超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。</p>
    <p><span>justify</span>HTML稱為超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。</p>
    <p><span>start</span>HTML稱為超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。</p>
    <p><span>end</span>HTML稱為超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。</p>
    <p><span>initial</span>HTML稱為超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。</p>
    <p><span>inherit</span>HTML稱為超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。</p>

</body>
</html>

text-align-last 只在text-align:justify 時(shí)才有效

text-overflow

使用時(shí)需要設(shè)置元素為overflow:hidden;

中文無效，英文短單詞無效，只對(duì)英文長單詞有效

<!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稱為超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。</div>
    <div><span>ellipsis</span>HTML稱為超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。</div>
    <div><span>string</span>HTML稱為超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。</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>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div><span>ellipsis</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div><span>string</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>


</body>
</html>

text-overflow:clip; 隱藏

text-overflow:ellipsis; 省略號(hào)

text-overflow:string; 指定字符，只在火狐瀏覽器有效

<!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>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div><span>ellipsis</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div><span>string</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>


</body>
</html>

overflow: visible | hidden | scroll | auto | inherit

鼠標(biāo)懸浮時(shí)顯示隱藏的文字

<!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>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>


</body>
</html>

@font-face 兼容性 IE9+

字體格式

TrueType .ttf 無優(yōu)化 兼容性IE9+

OpenType .otf 是ttf的升級(jí)版，不兼容IE

.woff web版本最佳字體格式 是TrueType/OpenType的壓縮格式 兼容性IE9+ 但是不能兼容手機(jī)端！

.eot IE專用字體格式

.svg svg字體格式 IE和火狐都不兼容

自定義字體通用模板

<!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'),/*兼容IE9+*/
            url('font/myFont.eot?#iefix') format('embedded-opentype'),/*兼容IE6-8*/
            url('font/myFont.ttf') format('truetype'),/*兼容手機(jī)端*/
            url('font/myFont.woff') format('woff'),/*兼容所有瀏覽器*/
            url('font/myFont.svg#myFont') format('svg');/*針對(duì)ios開發(fā)*/

    }
    p{font-family: 'myFont';} </style> </head> <body> <p>這是我的自定義字體呀~</p> </body></html>

獲取特殊字體的網(wǎng)站：https://www.fontsquirrel.com/tools/webfont-generator

由于是國外服務(wù)器，因此下載速度比較慢

注意：經(jīng)我個(gè)人發(fā)現(xiàn)，這個(gè)軟件轉(zhuǎn)換出來的字體格式，都只支持英文版

建議還是使用其他國內(nèi)的在線轉(zhuǎn)換工具或者網(wǎng)址

字體文件

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    @font-face {
        font-family: '楊任東竹石體';
        src:url('myfont/楊任東竹石體.eot'),/*兼容IE9+*/
            url('myfont/楊任東竹石體.eot?#iefix') format('embedded-opentype'),/*兼容IE6-8*/
            url('myfont/楊任東竹石體.ttf') format('truetype'),/*兼容手機(jī)端*/
            url('myfont/楊任東竹石體.woff') format('woff'),/*兼容所有瀏覽器*/
            url('myfont/楊任東竹石體.svg#楊任東竹石體') format('svg');/*針對(duì)ios開發(fā)*/
    }
    p{font-family: '楊任東竹石體';font-size:24px;}
</style>
</head>
<body>

    <p>HELLO THIS IS MY FONT~這是我的自定義字體~</p>

</body>
</html>

成功~~~

總結(jié)

以上所述是小編給大家介紹的CSS3中新增的對(duì)文本和字體的設(shè)置，希望對(duì)大家有所幫助！

相關(guān)文章

最新評(píng)論