首頁 web前端 css教學 溢出隱藏:最全的利用css解決內容溢出問題的幾種方案

溢出隱藏:最全的利用css解決內容溢出問題的幾種方案

May 31, 2017 pm 04:47 PM

在p版面中,有的文字內容多了會超過溢出我們限制的高度,有的圖片會撐破DIV,讓網頁錯位變亂。內容溢出了容器,超出了容器所限定的寬度和高度該怎麼辦?可以將文字溢出部分進行隱藏或用省略號取代,那具體如何實現呢?本文就告訴你如何使用換行,省略號等方式來解決這些溢出的問題。

一、利用換行來解決溢出問題

#1. 如何用word-wrap解決文字溢出的問題

溢出隱藏:最全的利用css解決內容溢出問題的幾種方案

word-break:break-all和word-wrap:break-word常用來解決長字串換行問題。 word-break:break-all在IE6/7/chrome/safari為一派,表現為尾部截斷,而ff3.0/opera則表現為無效。既過長單字換行顯示,然後溢出邊界。 word-wrap:break-word;在IE6/7/chrome/safari為一派 表現為長單字換行,再顯示不下才裁切。而ff3.0/opera也表現為無效。

2. css溢出與換行該如何處理

#文字過長,在容器內顯示不下的時候,是否要換行,使用white-space : normal / nowrap 屬性,normal : 採用瀏覽器預設設定;nowrap : 不換行。

溢出後的處理方式,若是想隱藏溢出的內容,可以考慮使用 text-overflow 屬性。

3. 火狐/IE瀏覽器flash透明,css強制不換行,溢出隱藏

溢出隱藏:最全的利用css解決內容溢出問題的幾種方案

css強制不換行,溢出隱藏:overflow:hidden

使用說明及要點:

#◎ 檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。
◎ 設定textarea物件為hidden值將隱藏其捲軸。
◎ 對於table來說,假如table-layout屬性設定為fixed,則td物件支援帶有預設值為hidden的overflow屬性。如果設為hidden,scroll或auto,那麼超出td尺寸的內容將被剪切。如果設為visible,將導致額外的文字溢出到◎ 右邊或左邊(視direction屬性設定而定)的儲存格。
◎ 自IE5開始,此屬性在MAC平台上可用。 對應的腳本特性為overflow。

二、利用省略號來解決溢位問題

1. html文字控制顯示字數超出用省略號的方法

溢出隱藏:最全的利用css解決內容溢出問題的幾種方案

#一般用p+css的容器中文字超出長度會浮動到框外或把框撐大,有時候需要考慮瀏覽器相容問題,不同瀏覽器對CSS標準執行也是不同的。 由於Firefox是公認的標準瀏覽器[當然, Opera也是], 且市佔率較高, 因此可以拿Firefox來認證。

2. ###CSS、j's單行、多行文字溢位顯示省略號 #########在項目中,由於實際描述文字過多,導致初始頁面縱向長度過長,也使得餘下資訊利用率降低;所以在文字過多的時候,初始化限制行數是有必要的,CSS單行多行文字溢出,顯示省略號。 ######3. ###單行及多行文字溢出以省略號顯示的方法總結#########在前端頁面佈局中,經常會有因文字過多而影響頁面排版。特別是在行動裝置頁面中,因螢幕寬度不夠段落文字如完全顯示則會打亂佈局。因此若段落文字能根據螢幕空餘大小而顯示就完美了,也就是若螢幕夠大,段落文字就完全顯示,若螢幕很小,則段落文字以省略號的形式部分顯示。 ###

4. table表格中的內容溢出佈局方式

我們知道當我們在table裡輸入過多的文字內容的時候會撐亂表格,例如一行顯示過長或自動換行。可是有的時候我們就想在固定寬度的一行中顯示,如果多出的部分那就用點點點代替,這樣就不會撐亂表格了。

5. 用css解決標題顯示字數超出省略號取代的方法

#步驟一:內容超出寬度時隱藏超出部分的內容

步驟二:當物件內文字溢出時顯示省略標記(...)

有關CSS內容溢出和隱藏的問答

1. html - 如何用javascript判斷p是否發生了溢出?

2. css3 - 清單橫向溢出就顯示 省略號(省略號是圖片)

3. 溢出隱藏後如何取得內部元素的高度?

【相關推薦】

1. php.cn獨孤九賤(2)-css影片教學

以上是溢出隱藏:最全的利用css解決內容溢出問題的幾種方案的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-

See all articles