關於html中的文字節點問題

2022-07-20 14:54:12 字數 1503 閱讀 3992

text-indent屬性規定文字塊首行文字的縮排。(注意是首行文字)

關鍵字:塊狀元素下的文字,首行的縮排。所以span,b,a等等這些行內標籤,在ff和手機瀏覽器下,text-indent無效的。

那麼行內標籤想縮排怎麼辦?

設定行內元素為塊狀元素:

display:block/inline-block/inline-flex/box/list-item;

text-indent方法,對應的js寫法:

textindent 屬性縮排元素中的首行文字。(注意是首行文字)

object.style.textindent=length|%
text-align: justify;

chrome瀏覽器下,當文字不需要居中,是左對齊,每行文字末尾總有一點點空隙。

乙個盒子下有一段文字,這段文字左對齊,就算給這段文字加了p標籤,設定了寬度,設定了 margin: 0 auto; 依舊有一點點偏差。這個時候用這個text-align: justify;就可以解決這個問題。

這個屬性也有它自己的問題:它會增加文字間距。限制在一定的p標籤寬度內,這個文字間距看起來也沒那麼大。

值 justify 可以使文字的兩端都對齊。在兩端對齊文字中,文字行的左右兩端都放在父元素的內邊界上。然後,調整單詞和字母間的間隔,使各行的長度恰好相等。您也許已經注意到了,兩端對齊文字在列印領域很常見。不過在 css 中,還需要多做些考慮。

要由使用者**(而不是 css)來確定兩端對齊文字如何拉伸,以填滿父元素左右邊界之間的空間。例如,有些瀏覽器可能只在單詞之間增加額外的空間,而另外一些瀏覽器可能會平均分布字母間的額外空間(不過 css 規範特別指出,如果 letter-spacing 屬性指定為乙個長度值,「使用者**不能進一步增加或減少字元間的空間」)。還有一些使用者**可能會減少某些行的空間,使文字擠得更緊密。所有這些做法都會影響元素的外觀,甚至改變其高度,這取決於使用者**的對齊選擇影響了多少文字行。

css 也沒有指定應當如何處理連字元(注1)。大多數兩端對齊文字都使用連字元將長單詞分開放在兩行上,從而縮小單詞之間的間隔,改善文字行的外觀。不過,由於 css 沒有定義連字元行為,使用者**不太可能自動加連字元。因此,在 css 中,兩端對齊文字看上去沒有列印出來好看,特別是元素可能太窄,以至於每行只能放下幾個單詞。當然,使用窄設計元素是可以的,不過要當心相應的缺點。

注1:css 中沒有說明如何處理連字元,因為不同的語言有不同的連字元規則。規範沒有嘗試去調和這樣一些很可能不完備的規則,而是乾脆不提這個問題。

還有乙個辦法,比如給包裹一段文字的p標籤加設定寬度後,再設定左右間距 padding,chrome瀏覽器就不會看到有這個文字結尾的空隙。

padding: .5em .4em;

DOM中元素節點 屬性節點 文字節點的理解

節點資訊 每個節點都擁有包含著關於節點某些資訊的屬性。這些屬性是 nodename 節點名稱 nodevalue 節點值 nodetype 節點型別 nodetype nodetype 屬性可返回節點的型別。最重要的節點型別是 元素型別 節點型別 元素 element node 1 屬性 attri...

DOM中元素節點 屬性節點 文字節點的理解

每個節點都擁有包含著關於節點某些資訊的屬性。這些屬性是 nodetype 屬性可返回節點的型別。最重要的節點型別是 元素型別 節點型別元素1 屬性2文字3 注釋8文件9 在實際應用中,經常用到的就是元素節點 屬性節點和文字節點了,下面我們通過小段 進行講解 1 元素節點 john doejack j...

獲取文字節點內容 nodeValue 的方法。

id prompt aa li ba li ca li da li ul var prompt document.getelementbyid prompt var text prompt.childnodes 1 childnodes 0 firstchild.nodevalue childnod...