CSS3中新增的對文本和字體的設置

来源:https://www.cnblogs.com/chenyingying0/archive/2020/02/02/12254138.html
-Advertisement-
Play Games

文字陰影 text-shadow: 水平偏移 垂直偏移 模糊 顏色 相容性：IE10+ <!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</ ...


文字陰影

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>這是一段測試文本鴨</p>
</body>
</html>

 

 css3 換行

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

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

對於中文文本：normal 和 break-all 效果相同；keep-all 即根據標點符號換行

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

 

 word-wrap 針對連續的英文長單詞或者url網址（中文無效）

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  文本最後一行如何對齊

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

</body>
</html>

 

 text-align-last 只在text-align:justify 時才有效

text-overflow

使用時需要設置元素為overflow:hidden;

中文無效，英文短單詞無效，只對英文長單詞有效

<!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稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網路上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。</div>
    <div><span>ellipsis</span>HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網路上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。</div>
    <div><span>string</span>HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網路上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。</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;  省略號

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

滑鼠懸浮時顯示隱藏的文字

<!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   無優化 相容性IE9+

OpenType   .otf  是ttf的升級版，不相容IE

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

.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'),/*相容手機端*/
            url('font/myFont.woff') format('woff'),/*相容所有瀏覽器*/
            url('font/myFont.svg#myFont') format('svg');/*針對ios開發*/

    }
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • css3使用animation屬性實現炫酷效果
    animation-name 動畫名稱，可以有多個值，用逗號隔開，表示綁定了多個動畫 animation-name屬性為動畫指定一個名稱 animation-name相容主流的瀏覽器，不過還是需要加首碼去相容 animation-name有兩個屬性值，分別是keyframename和none <!D ...
  • 通過CSS3屬性值的變化實現動畫效果+觸發這些動畫產生交互
    css3過渡 transition 相容性：IE10+ transition: none | all | property 預設為none all 表示所有屬性過渡 property 指定屬性值，如color opacity <!DOCTYPE html> <html lang="en"> <hea ...
  • css3元素如何扭曲、移位或旋轉
    css3 transform 相容性：IE10+ transform:rotate(deg) 正數為順時針，負數為逆時針 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <s ...
  • 理解Javascript的柯里化
    前言 本文1454字，閱讀大約需要4分鐘。 總括: 本文以初學者的角度來闡述Javascript中柯里化的概念以及如何在工作中進行使用。 原文地址： "理解Javascript的柯里化" 知乎專欄: "前端進擊者" 博主博客地址： "Damonare的個人博客" 事親以敬，美過三牲。 正文 函數式編 ...
  • Node.js---起步
    1.下載--安裝 2.創建js文件 var http = require('http'); var url=require('url'); //引入url 模塊，幫助解析 var querystring=require('querystring');// 引入 querystring 庫，也是幫助解 ...
  • java script 內置對象
    java script 內置對象 Date 日期對象 字元串對象 定義字元串的方法就是直接賦值 使用 String 對象的 toUpperCase() 方法來將字元串小寫字母轉換為大寫,反之 toLowerCase()方法將大寫轉為小寫 返回指定的字元 返回指定的字元串首次出現的位置 字元串分割sp ...
  • 基於雲開發開發 Web 應用（二）：界面 UI 開發
    在這一篇文章，我們可以開始使用 Vuetify 來實現 Web 應用的構建。這一篇內容沒有那麼多，更多討論的是 UI 和 UX 介紹。 ...
  • node post 大數據無響應超時
    使用 express 框架，post 較大數據量（富文本，裡面包含了圖片base64數據，大約300k）時，node 無響應，把數據內容減少後能順利提交。 是因為數據量大過body post 的限制導致不能提交。 請通過以下語句修改body post 數據大小限制，使數據能夠提交。 var body ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類