TML 基礎(chǔ)
非常簡(jiǎn)單的HTML文檔
HTML 標(biāo)題
HTML 段落
HTML 鏈接
HTML 圖片
實(shí)例解析
HTML 標(biāo)題
HTML 標(biāo)題
在html源碼中插入注釋
插入水平線
實(shí)例解析
HTML 段落
HTML 段落
更多段落
本例演示在 HTML 文檔中折行的使用。
HTML 格式化的某些問(wèn)題。
實(shí)例解析
HTML 文本格式化
文本格式化
此例演示如何使用 pre 標(biāo)簽對(duì)空行和空格進(jìn)行控制。
此例演示不同的"計(jì)算機(jī)輸出"標(biāo)簽的顯示效果。
此例演示如何在 HTML 文件中寫(xiě)地址。
此例演示如何實(shí)現(xiàn)縮寫(xiě)或首字母縮寫(xiě)。
此例演示如何改變文字的方向。
此例演示如何實(shí)現(xiàn)長(zhǎng)短不一的引用語(yǔ)。
文本下劃線與刪除線
實(shí)例解析
HTML 樣式
HTML Style 元素
背景色樣式
字體樣式,顏色,大小
文本對(duì)齊樣式
設(shè)置文本字體
設(shè)置文本字體大小
設(shè)置文本字體顏色
設(shè)置文本字體,字體大小,字體顏色
HTML使用不同樣式
沒(méi)有下劃線的鏈接
鏈接到一個(gè)外部樣式表
實(shí)例解析
HTML 鏈接
創(chuàng)建超級(jí)鏈接
將圖像作為鏈接
在新的瀏覽器窗口打開(kāi)鏈接
鏈接到同一個(gè)頁(yè)面的不同位置
跳出框架
創(chuàng)建電子郵件鏈接
創(chuàng)建電子郵件鏈接 2
實(shí)例解析
HTML 圖像
插入圖像
從不同的位置插入圖片
排列圖片
本例演示如何使圖片浮動(dòng)至段落的左邊或右邊。
制作圖像鏈接
創(chuàng)建圖像映射
實(shí)例解析
HTML 表格
簡(jiǎn)單的表格
沒(méi)有邊框的表格
表格中的表頭
帶有標(biāo)題的表格
跨行或跨列的表格單元格
表格內(nèi)的標(biāo)簽
單元格邊距(Cell padding)
單元格間距(Cell spacing)
實(shí)例解析
HTML 列表
無(wú)序列表
有序列表
不同類(lèi)型的有序列表
不同類(lèi)型的無(wú)序列表
嵌套列表
嵌套列表 2
定義列表
實(shí)例解析
HTML Forms 和 Input
創(chuàng)建文本域(Text fields)
創(chuàng)建密碼域
復(fù)選框
單選按鈕
簡(jiǎn)單的下拉列表
預(yù)選下拉列表
本例演示如何創(chuàng)建一個(gè)文本域(多行文本輸入控件)。
創(chuàng)建一個(gè)按鈕
本例演示如何在數(shù)據(jù)周?chē)L制一個(gè)帶標(biāo)題的框。
帶有文本域與輸入域的表單
帶有復(fù)選框與提交按鈕的form表單
帶有單選框與提交按鈕的表單
發(fā)送郵件表單
實(shí)例解析
HTML iframe
內(nèi)聯(lián)框架 (HTML頁(yè)面中插入框架)
實(shí)例解析
HTML 頭部元素
描述了文檔標(biāo)題
HTML頁(yè)面中默認(rèn)的URL鏈接
提供文檔元數(shù)據(jù)
實(shí)例解析
HTML 腳本
插入一個(gè)腳本
使用 <noscript> 標(biāo)簽
實(shí)例解析
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
篇文章深入討論了在CSS中裁剪多行文本的方法,以提高網(wǎng)頁(yè)的外觀和用戶體驗(yàn)。作者首先介紹了常見(jiàn)的CSS文本裁剪技術(shù),例如使用text-overflow和overflow屬性。然后,他引入了新的CSS屬性line-clamp,它可以更輕松地裁剪多行文本并添加省略號(hào)。作者解釋了如何使用line-clamp屬性設(shè)置最大行數(shù),并指出了一些需要注意的注意事項(xiàng)。
接下來(lái),作者提供了一些使用line-clamp屬性時(shí)可能遇到的限制和兼容性問(wèn)題,并分享了一種使用JavaScript 庫(kù)進(jìn)行文本裁剪的替代方法。他詳細(xì)介紹了如何使用該庫(kù)來(lái)自動(dòng)裁剪多行文本,并為讀者提供了示例代碼和演示。
下面是正文~~~
在Web 開(kāi)發(fā)中,CSS中的文本裁剪一直是一個(gè)問(wèn)題。直到幾年前,裁剪文本只能通過(guò)服務(wù)器端語(yǔ)言或JavaScript來(lái)完成,因?yàn)镃SS沒(méi)有文本裁剪功能。
在2007年,第一個(gè)支持使用CSS 裁剪 文本的瀏覽器是Internet Explorer 7(當(dāng)時(shí)IE是主流瀏覽器),它使用了 text-overflow: ellipsis; 屬性。該屬性使得文本的一行可以被修剪,這在修剪網(wǎng)頁(yè)文本方面是一個(gè)小的改進(jìn)。
h1{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
2012年,隨著Chrome中第一次實(shí)現(xiàn)CSS Flexbox,第一次支持多行文本修剪。它看起來(lái)很有前途,我們網(wǎng)頁(yè)開(kāi)發(fā)人員認(rèn)為這是不再需要服務(wù)器端或JavaScript操作來(lái)修剪多行段落的開(kāi)始。
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
但是這種喜悅很快就消失了。CSS Flexbox 模塊更新了兩次,之后就沒(méi)有留下任何多行特性的痕跡,這個(gè)特性是在 CSS Flexbox 的第一次實(shí)現(xiàn)中引入的。
對(duì)于許多開(kāi)發(fā)者 - 包括我在內(nèi) - 他們正在使用這個(gè)功能,這個(gè)功能只被一個(gè)舊的非官方CSS模塊支持,這些更新感覺(jué)就像是多行修剪功能的死亡。
CSS flexbox版本的歷史:
display: box; /* old syntax from 2009 */
display: flexbox; /* unofficial syntax from 2011 */
display: flex; /* official 2013 syntax*/
在2015年7月,Edge瀏覽器決定支持 line-clamp 功能,使用 -webkit 前綴,這是舊的CSS Flexbox模塊中的語(yǔ)法。非常不尋常的是,微軟瀏覽器使用了 -webkit 前綴,這通常只用于Webkit瀏覽器, 如Chrome / Safari和Opera。
2019年7月,它再次發(fā)生了!這次是Firefox瀏覽器決定支持此功能。同樣,以同樣不尋常的方式。
IE,F(xiàn)irefox使用了舊的Flexbox模塊和 -webkit 前綴。
這兩個(gè)主要的瀏覽器,使用兩個(gè)不同的瀏覽器引擎——Mozilla的Moz和Microsoft的Edge,決定使用一個(gè)Webkit瀏覽器的舊功能。
絕望的時(shí)刻需要不擇手段,由于使用 –webkit 前綴是支持此功能的官方方式最接近的方式,因此他們做出了這個(gè)激動(dòng)人心的決定。
主流瀏覽器如Firefox和Edge開(kāi)始支持非官方的 line-clamp 功能,這意味著這個(gè)功能已經(jīng)成為常態(tài)。
使用 line-clamp 非常簡(jiǎn)單:
.content p{
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
現(xiàn)在我們有兩種通過(guò)CSS修剪文本的方法:省略號(hào)方法僅適用于單行文本,而line-clamp屬性適用于多行文本修剪。
如果可能的話,我更喜歡使用省略號(hào)這種舊的方式,因?yàn)樗咏?CSS 中的官方方式。
鑒于此,我創(chuàng)建了一個(gè) @mixin ,它通過(guò)接受一個(gè)整數(shù)的可選參數(shù)來(lái)同時(shí)針對(duì)單行修剪和多行修剪。
如果mixin傳遞了一個(gè)數(shù)字,它將使用多行clamp方法。如果它沒(méi)有收到任何參數(shù),它將使用帶省略號(hào)的單行trim方法。這是一個(gè)重載函數(shù):
@mixin trim($numLines: null){
@if $numLines != null {
display:-webkit-box;
-webkit-line-clamp:$numLines;
-webkit-box-orient:vertical;
overflow:hidden;
}
@else{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
display:block;
}
}
我們可以以兩種不同的方式使用這個(gè)mixin:
.foo{
@include trim; /*will use the ellipsis = else result*/
}
.bar{
@include trim(3); /*will use the line-clamp = if result*/
}
事例地址:https://codepen.io/elad2412/pen/Poovzzb
.foo 和 .bar 類(lèi)的示例結(jié)果:
瀏覽器支持非常廣泛,幾乎覆蓋了全球95%的瀏覽器。如果在瀏覽器中 line-clamp 不起作用,它只是不會(huì)修剪文本。這種回退對(duì)于不支持的瀏覽器已經(jīng)足夠好了。
網(wǎng)頁(yè)設(shè)計(jì)中,標(biāo)題、段落和文本格式是構(gòu)成頁(yè)面內(nèi)容的基石。它們不僅有助于傳達(dá)信息,還能通過(guò)組織和強(qiáng)調(diào)內(nèi)容來(lái)提升用戶體驗(yàn)。本文將詳細(xì)介紹這些元素的使用方法,并提供實(shí)際例子。
標(biāo)題是用來(lái)定義網(wǎng)頁(yè)中不同部分的標(biāo)題。在HTML中,標(biāo)題標(biāo)簽從<h1>到<h6>,其中<h1>表示最高的層級(jí),通常用于主標(biāo)題,而<h6>表示最低的層級(jí)。為了保證良好的SEO實(shí)踐和無(wú)障礙訪問(wèn),應(yīng)保證標(biāo)題層級(jí)的邏輯順序。
<h1>歡迎來(lái)到我的博客</h1>
<h2>最新文章</h2>
<h3>Web開(kāi)發(fā)的未來(lái)趨勢(shì)</h3>
<h4>前言</h4>
<h4>主要內(nèi)容</h4>
<h4>結(jié)論</h4>
<h3>如何提高JavaScript技能</h3>
在這個(gè)例子中,<h1>用于最主要的標(biāo)題,<h2>用于區(qū)分頁(yè)面中的主要部分,<h3>用于文章標(biāo)題,<h4>用于文章內(nèi)部的小節(jié)。
段落是文本的基本單元,用于組織和展示連續(xù)的文本內(nèi)容。在HTML中,<p>標(biāo)簽用于定義段落。合理的段落分割有助于讀者更好地理解和吸收信息。
<p>在今天的數(shù)字時(shí)代,網(wǎng)頁(yè)開(kāi)發(fā)已經(jīng)成為了一個(gè)不斷演變的領(lǐng)域。隨著新技術(shù)的出現(xiàn),開(kāi)發(fā)者需要不斷學(xué)習(xí)和適應(yīng)。</p>
<p>JavaScript是構(gòu)建現(xiàn)代網(wǎng)頁(yè)不可或缺的一部分。為了成為一名更優(yōu)秀的前端開(kāi)發(fā)者,提高JavaScript技能是非常重要的。</p>
在這個(gè)例子中,兩個(gè)<p>標(biāo)簽分別定義了兩個(gè)獨(dú)立的段落,每個(gè)段落都是一個(gè)完整的思想單元。
文本格式用于強(qiáng)調(diào)或區(qū)分網(wǎng)頁(yè)中的文本內(nèi)容。HTML提供了多種標(biāo)簽來(lái)改變文本的樣式和意義,包括但不限于加粗、斜體、下劃線、上標(biāo)和下標(biāo)等。
<strong>和<b>標(biāo)簽用于加粗文本,但<strong>通常表示重要性,而<b>僅用于視覺(jué)上的加粗。
<p>重要提示:<strong>請(qǐng)不要在任何情況下泄露您的密碼。</strong></p>
<p>這是一個(gè)<b>加粗</b>的文本示例。</p>
<em>和<i>標(biāo)簽用于斜體文本,<em>表示強(qiáng)調(diào),而<i>僅用于斜體樣式。
<p>當(dāng)我們談?wù)?lt;em>用戶體驗(yàn)</em>時(shí),我們指的是用戶與產(chǎn)品交互的整體感受。</p>
<p>這是一個(gè)<i>斜體</i>的文本示例。</p>
``標(biāo)簽用于下劃線文本,而<del>標(biāo)簽用于顯示文本已被刪除或更改。
<p>請(qǐng)閱讀使用條款了解更多信息。</p>
<p>原價(jià)<del>99.99美元</del> 現(xiàn)價(jià)69.99美元。</p>
<sup>和<sub>標(biāo)簽用于創(chuàng)建上標(biāo)和下標(biāo)文本,常用于科學(xué)公式和腳注。
<p>水的化學(xué)式是H<sub>2</sub>O。</p>
<p>愛(ài)因斯坦的質(zhì)能方程式E=mc<sup>2</sup>。</p>
合理使用標(biāo)題、段落和文本格式可以極大地提升網(wǎng)頁(yè)內(nèi)容的可讀性和專(zhuān)業(yè)性。通過(guò)明確的層級(jí)結(jié)構(gòu)和強(qiáng)調(diào)重要內(nèi)容,你可以幫助用戶快速找到他們需要的信息。記住正確使用這些基本元素,你的網(wǎng)頁(yè)將更加吸引人且功能強(qiáng)大。
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。