您現在的位置是:電腦技術吧?>? 故障問題 ??>??css文字省略號,css 文字超出省略號??>??正文詳情

css文字省略號,css 文字超出省略號

柯如云2019-11-13 09:31:23 人圍觀
簡介css文本溢出省略號由于頁面布局的需要,有些地方需要省略號太長。例如:標題的寬度限制在20個漢字以內,多余的用省略號代替。我們之前會使用程序攔截的方法,但是使用CSS攔截更有

因為網頁排版的需要,有些地方需要過長的問題加上省略號。

比如:標題限制20個中文的寬度,超出的就用省略號代替。

之前會使用程序截取的方法,不過使用css來截取更有利于SEO。

下面就介紹一下具體的使用方法:div class=title當對象內文本溢出時顯示省略標記/div這是一個例子,其實我們只需要顯示如下長度:css實現網頁中文字過長截取...title class應該這樣寫:.title{ width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}說明:1、寬度一定要設置,可以根據實際需求調整。

2、white-space:nowrap是禁止文字折行。

3、text-overflow表示當文本溢出時是否顯示省略標記,有兩個值:clip:不顯示省略標記(...),而是簡單的裁切。

ellipsis:當對象內文本溢出時顯示省略標記(...)4、overflow:hidden表示溢出內容為隱藏。

示例效果圖:#FormatImgID_0#示例代碼:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /titletext-overflow/title/headbodystyle type=text/css .test_demo_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;} .test_demo_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}/styleh2text-overflow : clip /h2 div class=test_demo_clip 不顯示省略標記,而是簡單的裁切條/divh2text-overflow : ellipsis /h2div class=test_demo_ellipsis 當對象內文本溢出時顯示省略標記/div/body/html

版權聲明:本文由 柯如云 整理編輯。

原標題:css文字省略號提示最佳實踐,css省略號

轉載注明出處:http://www.dn9ww09s.icu/fault/11782.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 技嘉主板bios設置,映泰主板bios設置教程

    技嘉主板bios設置,映泰主板bios設置教程 相關圖片主板bios因為BIOS設置是由英語組成的,所以許多用戶不知道如何設置BIOS。英文界面的BIOS設置總是讓新手小白覺得很累,不喜歡。看著凌亂的英文字母,他不知道該去哪里,微星主板bio...

  • 小白一鍵裝機可靠嗎,電腦一鍵重裝系統排名

    小白一鍵裝機可靠嗎,電腦一鍵重裝系統排名 相關圖片最好最安全的裝機軟件現在系統安裝已經很流行了。過去,當電腦出現問題時,很少有人能去電腦城幫忙安裝。您可以通過安裝軟件安裝系統。哪一個是最好的?看看小編的推薦。哪個...

  • 格式化硬盤,怎么格式化硬盤

    格式化硬盤,怎么格式化硬盤 相關圖片不格式化硬盤重新分區一天,我突然從朋友那里聽說,他上網的時候,不知道自己點擊了什么,而是格式化了所有的硬盤。筆者首先想到的是:它會不會是7月份國內著名的宏病毒殺手?...

  • 筆記本本地連接沒了,筆記本本地連接沒有了怎么辦

    筆記本本地連接沒了,筆記本本地連接沒有了怎么辦 相關圖片筆記本怎么設置本地連接有很多筆記本電腦用戶向小編反映,他們經常發現筆記本電腦的本地連接丟失。但是,不同的是沒有本地連接,有時我們可以正常上網,有時我們不能上網。發...

  • 怎么加快網頁打開速度,加快網頁加載速度

    怎么加快網頁打開速度,加快網頁加載速度 相關圖片網站速度慢怎么加快web開發人員是否必須掌握復雜的組件技術來加速HTML頁面的訪問?答案是:不一定!事實上,關于HTML和DHTML有很多技巧,這些技巧原則上很簡單,也很容易使用網頁加...

  • 華碩筆記本怎么重裝系統,華碩筆記本裝系統

    華碩筆記本怎么重裝系統,華碩筆記本裝系統 相關圖片筆記本電腦重裝系統華碩電腦是世界知名品牌,很多用戶都會購買華碩筆記本。隨著計算機的不斷使用和使用,計算機不可避免地出現卡死、墜毀、運行越來越慢等問題。而一些有技術...

  • 數學算術技巧,算術

    數學算術技巧,算術 相關圖片口算技巧100內加法我們來談談calc()函數。此函數允許您執行簡單的算術計算,例如計算元素的長度和寬度,無需編寫難以維護的JavaScript代碼。此函數支持所有簡單的基本算術運乘法口...

  • 路由器關閉端口,路由器如何關閉端口

    路由器關閉端口,路由器如何關閉端口 相關圖片多端口路由器445港是一個聲譽參差不齊的港口。與端口139一起,端口445是IPC$入侵的主通道。有了它,我們可以方便地訪問局域網中的各種共享文件夾或打印機,但正是因為有了路由器端...

  • 一鍵還原精靈,一鍵還原精靈 進入不了

    一鍵還原精靈,一鍵還原精靈 進入不了 相關圖片一鍵還原精靈的熱鍵原理說到還原工具,我不禁想到了“冰點還原”、“小哨兵還原”、“鬼魂還原”等。有一段時間,我不知道選擇哪一個好用。我們必須考慮簡單的處理、使用和安...

  • 縮小,怎么把照片比例縮小

    縮小,怎么把照片比例縮小 相關圖片css 圖片等比縮放當然,生成縮略圖的效果要好得多,如果它被保留到程序中,但有時由于某些原因,例如服務器不支持GD,不可避免地會要求CSS幫助將大圖片縮小到一定的大小,對于現...

熱評文章

  • IE修復專家,超級兔子IE修復專家

    IE修復專家,超級兔子IE修復專家 相關圖片IE修復大師Ie修復專家(最佳Ie修復軟件)修復功能:可修復Ie標題欄、主頁、右鍵菜單、工具欄按鈕、工具欄菜單、附加工具欄(如百度soba、谷歌工具欄、搜狐工具欄等)、ouie修復如何...

  • ad轉換的過程,轉換效率

    ad轉換的過程,轉換效率 相關圖片模擬量輸入輸出我們知道XML XSLT可以直接輸出到支持XML的瀏覽器,比如IE 5.0或更高版本。但是,我們還需要考慮到許多瀏覽器不直接支持XML。在這種情況下,我們需要將轉換速度最快的...

  • 如何將歌曲下載到u盤,歌曲下載到u盤的方法

    如何將歌曲下載到u盤,歌曲下載到u盤的方法 相關圖片在電腦怎么下載歌曲到u盤下載到U盤后,您可以在各種設備上播放自己喜愛的歌曲。接下來,我想談談如何將歌曲下載到U盤并保存它們。本文的研究對象是那些與計算機相比個頭相對較...

  • HTML 屬性,html屬性有哪些

    HTML 屬性,html屬性有哪些 相關圖片html屬性詳解使用tabIndex屬性設置tab鍵在控件中的移動順序,方法是將控件的tabIndex屬性設置為1到32767之間的值,這樣就可以將控件添加到tab鍵序列中,當html5表格所有屬性...

  • 怎樣卸載冰點還原,冰點還原軟件怎么卸載

    怎樣卸載冰點還原,冰點還原軟件怎么卸載 相關圖片如何不用密碼卸載冰點還原冰點恢復是一種保護系統不受損害的系統恢復軟件。所以,當我們不想有一天使用它并想卸載它時,我們怎么能做到呢?我們需要知道冰點的卸載方法不同于...

  • xp如何連接共享打印機,win7如何共享打印機

    xp如何連接共享打印機,win7如何共享打印機 相關圖片xp和win7共享打印機打印機是我們日常工作中不可缺少的辦公設備。隨著時代的發展,它越來越重要。使用打印機設備時無法共享打印機的問題是什么?以Windows XP系統為例,解決打印機不...

  • css attr,css

    css attr,css 相關圖片css calc瀏覽器之間的激烈競爭意味著越來越多的人正在使用支持最新和最先進的W3C web標準的設備以更具交互性的方式訪問互聯網。這意味著我們最終可以使用更強大和更靈活的Cjquery設置...

  • cdr文件用什么打開,ai可以打開cdr文件嗎

    cdr文件用什么打開,ai可以打開cdr文件嗎 相關圖片cdr是什么格式的文件您可能會接觸到CDR格式的文件,但它們非常奇怪。CDR文件的內容是什么?CDR文件包含兩個繪圖應用程序:一個用于矢量繪圖和頁面設計,另一個用于圖像編輯。這種...

  • 怎么去分頁符,分頁符在哪

    怎么去分頁符,分頁符在哪 相關圖片取消 分頁符!DOCTYPEHTML PUBLIC-//W3C//DTD HTML 4.0 Transitional//EN HTMLHEAD TITLE nextcol 表格的分頁符在哪里...

  • 顯示器閃一下就黑屏了,顯示器閃黑屏又好了

    顯示器閃一下就黑屏了,顯示器閃黑屏又好了 相關圖片顯示器黑屏燈一直閃顯示器的黑屏怎么辦?它不能正常使用,所以不能放在一邊。今天的編輯會教你解決方法。我希望它能幫助你設置顯示器的閃光屏幕。作為一臺小小的白色電腦,沒...

關注微信

变脸官网查询