From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/text-justify/index.html | 174 ++++++++++++++++++++++++++++ 1 file changed, 174 insertions(+) create mode 100644 files/zh-cn/web/css/text-justify/index.html (limited to 'files/zh-cn/web/css/text-justify') diff --git a/files/zh-cn/web/css/text-justify/index.html b/files/zh-cn/web/css/text-justify/index.html new file mode 100644 index 0000000000..db387c6f37 --- /dev/null +++ b/files/zh-cn/web/css/text-justify/index.html @@ -0,0 +1,174 @@ +--- +title: text-justify +slug: Web/CSS/text-justify +tags: + - CSS文字 + - 布局 + - 排版 +translation_of: Web/CSS/text-justify +--- +
{{CSSRef}}
+ +
+ +

CSS属性 text-justify 定义的是当文本的 {{cssxref("text-align")}} 属性被设置为 :justify 时的齐行方法。

+ +
text-justify: none;
+text-justify: auto;
+text-justify: inter-word;
+text-justify: inter-character;
+text-justify: distribute; /* 已被废除，不提倡使用 */
+
+ +

{{cssinfo}}

+ +

语法

+ +

text-justify 属性的值只能取下面列表中的单个关键词值。

+ +

值

+ +
+
none
+
表示关闭掉齐行的设置。表现的效果和没有设置 {{cssxref("text-align")}} 一样，当你因为某种原因需要在已经设置了 {{cssxref("text-align")}} 的元素上禁用齐行效果的时候，这个属性值很有用。
+
译者注：经过测试，在谷歌（v 58.0.3029.110）下的表现与在火狐下的表现是不一样的，火狐下使用 none 属性时，的确可以禁用掉齐行设置，但是谷歌下还是没有设置 none 属性时的效果。
+
auto
+
默认值，浏览器根据显示的效果和质量来确定符合当前状态的最佳对齐方式，当然这种对齐方式将是最适合某种语言文字的排版（例如：英语，中文，日语，韩语等）。如果没有对 text-justify 进行设置的话，则是默认使用这样子的对齐规则。
+
inter-word
+
通过在文本中的单词之间添加空间来实现行对齐（这将会改变 {{cssxref("word-spacing")}} 的值），比如英语或韩语就是最适合使用这个属性来用空格分隔单词的语言。
+
inter-character
+
The text is justified by adding space between characters (effectively varying {{cssxref("letter-spacing")}}), which is most appropriate for languages like Japanese.
+
通过在文本中的字符之间添加空间来实现行对齐（这将会改变 {{cssxref("letter-spacing")}} 的值），比如日语就是最适合使用这个属性的语言。
+
distribute {{deprecated_inline}}
+
显示效果与设置了 inter-word 一致，不提倡使用这个属性，现在这个属性或许还能有效果，但那完全是为了向后兼容而被保留着。
+
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ + + +
p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  width: 95%;
+  margin: 10px auto;
+  text-align: justify;
+}
+
+.none {
+  text-justify: none;
+}
+
+.auto {
+  text-justify: auto;
+}
+
+.dist {
+  text-justify: distribute;
+}
+
+.word {
+  text-justify: inter-word;
+}
+
+.char {
+  text-justify: inter-character;
+}
+ +

{{EmbedLiveSample("示例","100%",400)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}}{{Spec2('CSS3 Text')}}
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}[2]14[1]{{CompatGeckoDesktop("55.0")}}11[1]{{CompatNo}}[2]{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}[2]{{CompatNo}}[2]14[1]{{CompatGeckoMobile("55.0")}}11[1]{{CompatNo}}[2]{{CompatNo}}
+
+ +

[1] 不支持标准属性值 inter-character 或 none 。但是支持过时的属性值 distribute和废弃属性值 distribute-all-lines、distribute-center-last、inter-cluster、inter-ideograph，以及 newspaper。

+ +

[2] 参照了默认的规范，属性值 inter-word 和 distribute 在“实验平台特性”的旗帜下被保留了下来，尽管 distribulte 已经不被提倡使用了。

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf