前端技術分享:盒模型的概念和文字溢位解決辦法

千鋒武漢發表於2021-05-12

      前端開發中盒模型是所有元素的基礎,如果弄不懂盒模型的概念就很難開發出好的頁面,下面小千就來給大家介紹一下盒模型和解決前端文字溢位的程式碼。

      盒模型

      盒模型是css佈局的基石,它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區、補白(填充)、邊框、邊界(外邊距)這就是盒模型。

盒模型

標準盒模型圖

      PADDING的用法及值含義

padding

      MARGIN的用法及值含義

margin

      盒模型的大小計算方式

計算高度

計算寬度

      文字溢位

      1.overflow

      visible:預設值,內容不會被修剪,會呈現在元素框之外;

      hidden:內容會被修剪,並且其餘內容是不可見的;

      scroll:內容會被修剪,但是瀏覽器會顯示捲軸,以便檢視其餘的內容;

      auto:如果內容被修剪,則瀏覽器會顯示捲軸,以便檢視其他的內容;

      inherit:規定應該從父元素繼承overflow屬性的值。

      2.white-space

      normal:預設值,多餘空白會被瀏覽器忽略只保留一個;

      pre:空白會被瀏覽器保留;

      pre-wrap:保留一部分空白符序列,但是正常的進行換行;

      pre-line:合併空白符序列,但是保留換行符;

      nowrap:文字不會換行,文字會在同一行上繼續,直到遇到<br/>標籤為止;

      3.text-overflow

      clip:不顯示省略號(...),而是簡單的裁切;

      ellipsis:當物件內文字溢位時,顯示省略標記;

      4.文字溢位變省略號設定

      text-overflow屬性僅是:當文字溢位時是否顯示省略標記,並不具備其它的樣式屬性定義,要實現溢位時產生省略號的效果還需定義:

      1)、容器寬度:width:value;(px、%,都可以)

      2)、強制文字在一行內顯示:white-space:nowrap;

      3)、溢位內容為隱藏:overflow:hidden;

      4)、溢位文字顯示省略號:text-overflow:ellipsis;

      注:必須是單行文字才能設定本文溢位!!!

      以上就是盒模型和前端文字溢位的介紹了,同學們趕緊去自己實踐一下吧。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2771890/,如需轉載,請註明出處,否則將追究法律責任。

相關文章