From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/zh-tw/web/css/white-space/index.html | 425 +++++++++++++++++++++++++++++ 1 file changed, 425 insertions(+) create mode 100644 files/zh-tw/web/css/white-space/index.html (limited to 'files/zh-tw/web/css/white-space') diff --git a/files/zh-tw/web/css/white-space/index.html b/files/zh-tw/web/css/white-space/index.html new file mode 100644 index 0000000000..eef166cc0e --- /dev/null +++ b/files/zh-tw/web/css/white-space/index.html @@ -0,0 +1,425 @@ +--- +title: white-space +slug: Web/CSS/white-space +translation_of: Web/CSS/white-space +--- +
{{CSSRef}}
+ +

此 CSS white-space 屬性決定如何處理元素內的空白字元。

+ +
+

提醒：如果要讓文字本身斷行，請改用 {{cssxref("overflow-wrap")}}、{{cssxref("word-break")}} 或 {{cssxref("hyphens")}}。

+
+ +
/* Keyword values */
+white-space: normal;
+white-space: nowrap;
+white-space: pre;
+white-space: pre-wrap;
+white-space: pre-line;
+
+/* Global values */
+white-space: inherit;
+white-space: initial;
+white-space: unset;
+
+ + + +

{{EmbedLiveSample("white-space", "100%", 530, "", "", "example-outcome-frame")}}

+ +

{{cssinfo}}

+ +

Syntax

+ +

 white-space 的特性值為下列其中之一。

+ +

Values

+ +
+
normal
+
連續的空白字元會被合併(collapse)，換行字元被視為空白字元。換行只在被文字空間限制時發生。
+
nowrap
+
對待空白字元的方式跟 normal 一樣，且會強制不換行。
+
pre
+
連續的空白字元都會被保留。換行在有換行字元以及{{HTMLElement("br")}}時發生。
+
pre-wrap
+
連續的空白字元都會被保留。換行會在換行字元、有{{HTMLElement("br")}}元素以及被文字空間限制時發生。
+
pre-line
+
連續的空白字元會被合併(collapse)。換行在換行字元、 {{HTMLElement("br")}}以及被文字空間限制時發生。
+
+ +

下列表格整理了各項 white-space 值的行為：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 New linesSpaces and tabsText wrapping
normalCollapseCollapseWrap
nowrapCollapseCollapseNo wrap
prePreservePreserveNo wrap
pre-wrapPreservePreserveWrap
pre-linePreserveCollapseWrap
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Basic example

+ +
code {
+  white-space: pre;
+}
+ +

Line breaks inside {{HTMLElement("pre")}} elements

+ +
pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
+  white-space: pre-wrap;      /* Modern browsers */
+}
+ +

See it in action

+ + + +

Source

+ +
    <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ +

CSS + Result

+ +

{{ EmbedLiveSample('See_in_action', '80%', '500px') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}{{Spec2('CSS3 Text')}}Precisely defines the breaking algorithms.
{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (normal and nowrap)1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}5.5[1]4.01.0 (85)
pre1.0{{CompatVersionUnknown}}1.06.04.01.0 (85)
pre-wrap1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("1.9")}}		8.08.03.0 (522)
pre-line1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}8.09.53.0 (522)
Support on <textarea>1.0{{CompatUnknown}}{{CompatGeckoDesktop("36")}}5.54.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer 5.5+ supports {{Cssxref("word-wrap")}}: break-word;.

+ +

See also

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