資料結構
網路化
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚學
法律學CSS 中 text-justify 屬性
當 text-align 屬性設定為 justify 值時，CSS 中的 text-justify 屬性用於設定文字的對齊方式。讓我們看看語法 −
text-justify: value;
這裡的值可以是以下任何一個 −
auto− 自動設定，由網路瀏覽器確定
inter-word− 增加或減少單詞之間的空格
inter-character− 增加或減少字元之間的空格
none− 停用對齊方式
語法還可以這樣表示 −
text-justify: auto|inter-word|inter-character|none|initial|inherit;
文字按單詞之間的距離對齊
在此示例中，我們將 text-justify 屬性的值設定為 inter-word，以增加或減少單詞之間的空格 −
text-justify: inter-word;
示例
現在，讓我們看一個示例，在 CSS 中使用 text-justify 屬性，並將值設定為 inter-word −
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
text-justify: inter-word;
color: white;
background-color: gray;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>
文字按字元之間的距離對齊
在此示例中，我們將 text-justify 屬性的值設定為 inter-character，以增加或減少字元之間的空格 −
text-justify: inter-character;
示例
現在，讓我們看一個示例，在 CSS 中使用 text-justify 屬性，並將值設定為 inter-character −
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: 3%;
background-color: peachpuff;
text-align: justify;
}
p:first-of-type{
text-justify: inter-character;
background-color: moccasin;
}
</style>
</head>
<body>
<article>
<p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur. Mauris rutrum, lectus quis porta bibendum, arcu neque dictum orci, sed volutpat ipsum risus in ex. Suspendisse potenti. Nam rhoncus ultricies nisi pulvinar rutrum. Mauris ullamcorper interdum urna a vulputate. Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est. Nunc viverra congue aliquam. Ut volutpat magna ipsum, in interdum velit mollis ac. </p>
<p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur. Mauris rutrum, lectus quis porta bibendum, arcu neque dictum orci, sed volutpat ipsum risus in ex. Suspendisse potenti. Nam rhoncus ultricies nisi pulvinar rutrum. Mauris ullamcorper interdum urna a vulputate. Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est. Nunc viverra congue aliquam. Ut volutpat magna ipsum, in interdum velit mollis ac.</p>
</article>
</body>
</html>
更新於： 2023-12-28
224 次瀏覽
廣告