text indent實現文字縮排布局

2021-09-02 08:34:10 字數 878 閱讀 8380

今天的總結很簡單,但對於初學者來說,特別是對於我這個初入前端門檻的開發者來說,就不是那麼地簡單了(這裡指不容易想到)。

好了,廢話不多說,今天的總結就是乙個對文字縮排的簡單應用。如何做到標題與內容的分離呢?如下圖:

就是做這麼乙個簡單的標題與內容的分離,看似簡單,但對於我這個初生牛犢確實難以想到(text-indent可以有負值來設定)。這不,想了很長時間才想了出來。

你只需編寫以下文件及寫以下樣式就可以輕鬆搞定。

html文件:

header:這是乙個關於文字布局的測試,這是乙個關於文字布局的測試,這是乙個關於文字布局的測試,這是乙個關於文字布局的測試,這是乙個關於文字布局的測試,這是乙個關於文字布局的測試,這是乙個關於文字布局的測試,這是乙個關於文字布局的測試,這是乙個關於文字布局的測試,這是乙個關於文字布局的測試,這是乙個關於文字布局的測試,這是乙個關於文字布局的測試,這是乙個關於文字布局的測試,這是乙個關於文字布局的測試。

style樣式:

html,body,object,iframe,div,span,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dd,dt,dl,img

.text_layout_test

好了,首先要給這段文件設定乙個padding,這是在設定text-indent之前的一些設定。是為了防止在設定text-indent為負值時,導致文字隱藏,設定padding後就可以有效避免。隨後,給文字設定乙個text-indent:-3.5em;就可以了。

UITableViewCell實現3D縮放動畫

gif效果圖 部分 import uikit class tableviewcontroller uitableviewcontroller mark table view data source override func tableview tableview uitableview,numbe...

實現TabControl 選項卡首個標籤縮排的方法

借用一張網圖說明需求 在網上找了一圈,沒有找到直接通過api或者重繪tabcontrol 的解決方法,最後靈機一動想到了乙個折 tou 中 lan 的解決辦法 1 tab1.tabpages.clear 2 tab1.sizemode tabsizemode.fixed 3 tab1.tabpage...

文字域實現文字環繞的效果

估計你看到這個標題是懵逼的,直接上圖吧!下面那個 退訂 那個位置好實現,可是上面那個 簽名 的文字環繞效果要怎麼實現呢?一開始想的是浮動,但是文字域不像單純的文字,無法實現這種文字環繞,該方案pass。後面想著單純用絕對定位,發現遇到的問題跟浮動是一樣的,該方案pass。後面一想,這個樣子不就是所謂...