前端基礎(5) 頁面重構與文字溢位

2021-10-23 23:12:16 字數 1147 閱讀 1074

overflow:visible/hidden/scrol/auto/inhert;
說明:

visible:預設值

hidden:內容被修剪,並且其與內容不可見;

scroll:內容被修剪,瀏覽器顯示滾動條,以便檢視其餘內容;

auto:如果內容被修剪,瀏覽器顯示滾動條,以便檢視其餘內容;

inherit:從父元素繼承overflow屬性值;

white-space:normal/nowrap/pre/pre-line/inherit;
說明:

normal:預設值,空白會被瀏覽器忽略,

nowrap:文字不會換行,文字會在同一行上繼續,直到遇到

標籤為止;

pre:空白會被瀏覽器保留,其行為方式類似html中的pre標籤;

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

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

inherit:規定應該從父元素繼承white-space屬性的值;(ie瀏覽器不支援此屬性值)

text-overflow:clip/ellipsis
說明:

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

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

*text-overflow屬性僅是…,當單行文字溢位時是否顯示省略標記,並不具備其它的樣式屬性定義

要實現單行文字溢位時產生省略號的效果還需定義:

1、容器寬度、高度:width:value;height:value;

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

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

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

class

="box1 box2"

>

div>

大於號寫法(>):>

小於號寫法(<):<

前端 本地除錯H5頁面方案總結

背景 大學畢業快要一年了,用leader的話說我也是有一年開發經驗的前端開發工程師了,輸出是檢驗輸入的最好方法,那我就慢慢來總結這一年來在工作中總結的經驗教訓,分享給大家,有不專業和不完善的地方,請大家多多指點反饋,比心 做過一段時間的運營需求,一些主要在手機上瀏覽的頁面,遇到的最大問題是除錯的問題...

Jexi設計 5 頁面樣式

仿照microsoft word,pagestyle的基本屬性 float width 總寬度 float height 總高度 float leftmargin 左邊距 float rightmargin 右邊距 float topmargin 上邊距 float bottommargin 下邊距...

h5頁面開發

相信大家在做h5頁面開發的時候,也會遇到一些問題。筆者將h5開發過程中常見的一些問題和解決辦法列舉出來,有需要的朋友可以參考一下。1.安卓瀏覽器看背景,有些裝置會模糊。同等比例的在pc端頁面和移動手機端頁面的解析度差很多,原因和devicepixelratio有關。手機解析度比pc端的解析度小,按照...