diff options
Diffstat (limited to 'files/zh-tw/web/css/white-space/index.html')
| -rw-r--r-- | files/zh-tw/web/css/white-space/index.html | 425 |
1 files changed, 425 insertions, 0 deletions
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 +--- +<div>{{CSSRef}}</div> + +<p>此 CSS <strong><code>white-space</code></strong> 屬性決定如何處理元素內的空白字元。</p> + +<div class="note"> +<p>提醒：如果要讓文字本身斷行，請改用 {{cssxref("overflow-wrap")}}、{{cssxref("word-break")}} 或 {{cssxref("hyphens")}}。</p> +</div> + +<pre class="brush: css no-line-numbers">/* 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; +</pre> + +<div class="hidden" id="white-space"> +<pre class="brush: html"><div class="grid"> +<div class="col"> + <div class="cell"> + <div class="label">normal</div> + <div> + <p class="wspNormal"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nulla pellentesque metus eget massa feugiat lobortis. + </p> + </div> + </div> + <div class="cell"> + <div class="label">pre-wrap</div> + <div> + <p class="wspPreWrap"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nulla pellentesque metus eget massa feugiat lobortis. + </p> + </div> + </div> + <div class="cell"> + <div class="label">pre-line</div> + <div> + <p class="wspPreLine"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nulla pellentesque metus eget massa feugiat lobortis. + </p> + </div> + </div> + <div class="cell"> + <div class="label">nowrap</div> + <div> + <p class="wspNowrap"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nulla pellentesque metus eget massa feugiat lobortis. + </p> + </div> + </div> + <div class="cell"> + <div class="label">pre</div> + <div> + <p class="wspPre"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nulla pellentesque metus eget massa feugiat lobortis. + </p> + </div> + </div> + <div class="note"> + Examples above are applied to the following HTML (square represents white spaces): + <pre>☐☐&lt;p&gt; +☐☐☐☐Lorem ipsum dolor sit amet, consectetur adipiscing elit. +☐☐☐☐Nulla pellentesque metus eget massa feugiat lobortis. +☐☐&lt;/p&gt;</pre> + </div> +</div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; +} + +pre { margin-bottom: 0; } + +.grid { + width: 100%; + height: 100%; + display: flex; + background: #EEE; + font: 1em monospace; +} + +.row { + display: flex; + flex: 1 auto; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} + +.col { + display: flex; + flex: 1 auto; + flex-direction: column; +} + +.cell { + box-sizing: border-box; + margin: .5em; + padding: 0; + background-color: #FFF; + overflow: hidden; + text-align: center; +} + +.note { + background: #fff3d4; + padding: 1em; + margin: .5em; + font: .8em sans-serif; + text-align: left; + flex: none; +} + +p { + width: 50%; + font: .8em sans-serif; + max-width: 100%; + box-sizing: border-box; + overflow: hidden; + resize: horizontal; + background: #E4F0F5; + padding: .5em; + margin: .5em auto 0; + text-align: left; +} + +.wspNormal { white-space: normal; } +.wspNowrap { white-space: nowrap; } +.wspPre { white-space: pre; } +.wspPreWrap { white-space: pre-wrap; } +.wspPreLine { white-space: pre-line; }</pre> +</div> + +<p>{{EmbedLiveSample("white-space", "100%", 530, "", "", "example-outcome-frame")}}</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<p> <code>white-space</code> 的特性值為下列其中之一。</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>連續的空白字元會被合併(collapse)，換行字元被視為空白字元。換行只在被文字空間限制時發生。</dd> + <dt><code>nowrap</code></dt> + <dd>對待空白字元的方式跟 <code>normal</code> 一樣，且會強制不換行。</dd> + <dt><code>pre</code></dt> + <dd>連續的空白字元都會被保留。換行在有換行字元以及{{HTMLElement("br")}}時發生。</dd> + <dt><code>pre-wrap</code></dt> + <dd>連續的空白字元都會被保留。換行會在換行字元、有{{HTMLElement("br")}}元素以及被文字空間限制時發生。</dd> + <dt><code>pre-line</code></dt> + <dd>連續的空白字元會被合併(collapse)。換行在換行字元、 {{HTMLElement("br")}}以及被文字空間限制時發生。</dd> +</dl> + +<p>下列表格整理了各項 <code>white-space</code> 值的行為：</p> + +<table class="standard-table"> + <thead> + <tr> + <th> </th> + <th>New lines</th> + <th>Spaces and tabs</th> + <th>Text wrapping</th> + </tr> + </thead> + <tbody> + <tr> + <th><code>normal</code></th> + <td>Collapse</td> + <td>Collapse</td> + <td>Wrap</td> + </tr> + <tr> + <th><code>nowrap</code></th> + <td>Collapse</td> + <td>Collapse</td> + <td>No wrap</td> + </tr> + <tr> + <th><code>pre</code></th> + <td>Preserve</td> + <td>Preserve</td> + <td>No wrap</td> + </tr> + <tr> + <th><code>pre-wrap</code></th> + <td>Preserve</td> + <td>Preserve</td> + <td>Wrap</td> + </tr> + <tr> + <th><code>pre-line</code></th> + <td>Preserve</td> + <td>Collapse</td> + <td>Wrap</td> + </tr> + </tbody> +</table> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Basic_example">Basic example</h3> + +<pre class="brush: css">code { + white-space: pre; +}</pre> + +<h3 id="Line_breaks_inside_HTMLElement(pre)_elements">Line breaks inside {{HTMLElement("pre")}} elements</h3> + +<pre class="brush: css">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 */ +}</pre> + +<h2 id="See_in_action" name="See_in_action">See it in action</h2> + +<div class="hidden"> +<pre class="brush: html"> <div id="css-code" class="box"> + p { white-space: <select> + <option>normal</option> + <option>nowrap</option> + <option>pre</option> + <option>pre-wrap</option> + <option>pre-line</option> + </select> } + </div> + <div id="results" class="box"> + <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> + </div> +</pre> + +<pre class="brush: css">.box { + width: 300px; + padding: 16px; + border-radius: 10px; +} + +#css-code { + background-color: rgb(220,220,220); + font-size: 16px; +} + +#results { + background-color: rgb(230,230,230); + overflow-x: scroll; + height: 400px; + white-space: normal; + font-size: 14px; +}</pre> + +<pre class="brush: js">var select = document.querySelector("#css-code select"); +var results = document.querySelector("#results p"); +select.addEventListener("change", function(e) { + results.setAttribute("style", "white-space: "+e.target.value); +})</pre> +</div> + +<h3 id="Source">Source</h3> + +<pre> <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> +</pre> + +<h3 id="CSS_Result">CSS + Result</h3> + +<p>{{ EmbedLiveSample('See_in_action', '80%', '500px') }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Precisely defines the breaking algorithms.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support (<code>normal</code> and <code>nowrap</code>)</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>5.5<sup>[1]</sup></td> + <td>4.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>pre</code></td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + <td>6.0</td> + <td>4.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>pre-wrap</code></td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("1.9")}}</td> + <td>8.0</td> + <td>8.0</td> + <td>3.0 (522)</td> + </tr> + <tr> + <td><code>pre-line</code></td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>8.0</td> + <td>9.5</td> + <td>3.0 (522)</td> + </tr> + <tr> + <td>Support on <code><textarea></code></td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("36")}}</td> + <td>5.5</td> + <td>4.0</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer 5.5+ supports {{Cssxref("word-wrap")}}<code>: break-word;</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Properties that define how words break <em>within themselves</em>: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}, {{cssxref("hyphens")}}</li> +</ul> |