数据结构
网络化
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 次浏览
广告