如何使用CSS設置對齊文本

使用CSS文本對齊屬性來對齊文本

在網站開發過程中,您可能會選擇調整的網站排版屬性之一是網站文字的合理性。 默認情況下,網站文字左對齊,這是多少網站離開他們的文字。 唯一的其他選擇是正確的,沒有人在網站上使用,因為它會使文本基本上不可能在線閱讀,或稱為完全正當的。

有理由的文本是左右兩側對齊的文本塊,而不僅僅是這些邊中的一個(這是“左”和“右”理由所做的)。 通過調整每行文本中的單詞和字母空格以確保每行具有相同的長度,從而實現雙重合理的效果。 這種效果被稱為完全證明 。 您可以使用text-align屬性在CSS中對齊文本

理由如何工作?

您經常在文本塊右側看到不均勻邊緣的原因是因為每行文本的長度不同。 一些行有更多的單詞或更長的單詞,而其他行有更少或更短的單詞。 為了證明這一段文字的正確性,必須在一些行上添加額外的空格,以便將所有行均勻化並使其一致。

每個網頁瀏覽器製造商都有自己的算法來應用一行中的額外空間。 瀏覽器會查看字長,連字符和其他因素以確定放置空間的位置。

因此,從一個瀏覽器到另一個瀏覽器,合理的文本可能看起來不一樣。 這很好,因為沒有網站訪問者會從一個瀏覽器跳到另一個瀏覽器,只是為了比較您的網站的行長看起來如何! 然而,請放心,主要的瀏覽器支持對於使用CSS來驗證文本是很好的。

如何理解文本

使用CSS對文本進行理由需要一段文本來證明。

通常,這是對文本段落進行的,因為跨越多行的大塊文本上下文將用段落標籤標記。

在你有一段文字後,只需將樣式設置為CSS 文本對齊樣式屬性即可。

text-align:justify;

您需要將此CSS規則應用於適當的選擇器以使文本塊按預期呈現。

何時對齊文本

許多人從設計的角度看待合理文本的外觀,很大程度上是因為它創建了一個非常一致的測量外觀,但是在網頁上完全證明文本是有缺點的。

首先,合理的文本可能很難閱讀。 這是因為當你對文本進行合理化處理時,有時會在行中的某些單詞之間添加大量額外的空間。 這些不一致的差距會使文本更難以閱讀。 這在網頁上尤為重要,因為照明,分辨率或其他硬件質量,這些網頁可能難以閱讀。 給文本添加不尋常的空間會使情況更糟。

除了可讀性問題之外,空白空間有時也會相互排成一行,在文本中間創建空白區域的“河流”。

那些白色空間的巨大差距確實會造成顯示的尷尬。 此外,在極短的線上,理由可能導致包含一個單詞的行在這些字母之間具有額外的空格。

那麼你什麼時候應該使用文本對齊? 當行長並且字體大小很小(在響應網站上行長度根據屏幕大小而變化時很難確保的事情)時,出現對齊文本的最佳時間。 對於該行的長度或文本的大小,沒有硬性和快速的數字;您必須使用您的最佳判斷。

在應用文本對齊樣式來對齊文本之後,對其進行測試以確保文本沒有空白的河流 - 並確保以各種大小進行測試。

要做到這一點的最簡單方法就是用斜眼看它。 在另一塊灰色的文本塊中,河流以白色的斑點出現。 如果你看到河流,你應該改變文本大小或文本塊的寬度,以擺脫那些難看的河流。

如本文所述,只有在將其與左對齊文本進行比較後才使用對齊方式。 您可以像完全證明一致,但標準的左對齊文本通常更具可讀性。 最後,您應該證明文字是合理的,因為您已選擇為設計目的證明文字的正確性,並確認您的網站仍然易於閱讀。