<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>word-break | SDT 攻城獅區</title>
	<atom:link href="https://sdt.hameba.tw/tag/word-break/feed/" rel="self" type="application/rss+xml" />
	<link>https://sdt.hameba.tw</link>
	<description>由Steven, Der, Ted 三位高級打字員所組成，是三位工程師(攻城獅)所維護的技術分享平台，或許偶爾會分享一些日常，有任何問題或是錯誤的部分，歡迎留言告訴我們！</description>
	<lastBuildDate>Thu, 27 Feb 2020 16:32:22 +0800</lastBuildDate>
	<language>zh-TW</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.3</generator>

<image>
	<url>https://sdt.hameba.tw/wp-content/uploads/2020/02/hameba_favicon-150x150.png</url>
	<title>word-break | SDT 攻城獅區</title>
	<link>https://sdt.hameba.tw</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>CSS 文字換行，強迫不換行。</title>
		<link>https://sdt.hameba.tw/503/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=css-%25e6%2596%2587%25e5%25ad%2597%25e6%258f%259b%25e8%25a1%258c%25ef%25bc%258c%25e5%25bc%25b7%25e8%25bf%25ab%25e4%25b8%258d%25e6%258f%259b%25e8%25a1%258c%25e3%2580%2582</link>
				<comments>https://sdt.hameba.tw/503/#respond</comments>
				<pubDate>Sun, 02 Feb 2020 04:18:28 +0000</pubDate>
		<dc:creator><![CDATA[Hsu Steven]]></dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[word-break]]></category>

		<guid isPermaLink="false">https://sdt.hameba.tw/?p=503</guid>
				<description><![CDATA[<p>換行在畫面開發設計上，常常會用於內容過多造成破版的問題， 此篇可以配合CSS「text-overflow: e &#8230; </p>
<p class="link-more"><a href="https://sdt.hameba.tw/503/" class="more-link">閱讀全文<span class="screen-reader-text">〈CSS 文字換行，強迫不換行。〉</span></a></p>
The post <a href="https://sdt.hameba.tw/503/">CSS 文字換行，強迫不換行。</a> first appeared on <a href="https://sdt.hameba.tw">SDT 攻城獅區</a>.]]></description>
								<content:encoded><![CDATA[<p>換行在畫面開發設計上，常常會用於內容過多造成破版的問題，</p>
<p>此篇可以配合<a href="https://sdt.hameba.tw/501/" target="_blank" rel="noopener noreferrer">CSS「text-overflow: ellipsis;」屬性限制內容字數，顯示「…」</a>應用，</p>
<p><span id="more-503"></span></p>
<p>CSS 文字換行的 style 為 word-wrap ，透過這個屬性可以指定換行的方式，並可以強制文字不換行。</p>
<p>而 CSS 還有個空白長度的設定，透過 white-space 可以移除連續空白。</p>
<ul class="list">
<li><span class="vj-cmd">word-break: break-all;</span> <b>文字強迫換行，太長的英文字，會自動切成兩半。</b>若一個單字過長，超過畫面的寬度，則將單字切斷，並換行。</li>
<li class="li1"><span class="s2">word-wrap:break-word; </span><b>文字自動換行，長英文字不切斷，</b>若一個單字過長，超過畫面的寬度，則將單字換行<span class="s2">(</span>不切斷單字<span class="s2">)</span>。不切斷英字單字對於一般的讀者是比較好懂的，唯一的缺點是右邊會出現很大的一塊空白。</li>
<li>white-space:pre; 保留原始資料的空白與換行，功能與 HTML tag 中的 ＜pre&gt; 相同。</li>
<li>white-space:nowrap; 強迫文字不換行，移除連續空白，移除換行符號(n r)， 強迫文字不換行。</li>
<li>white-space:pre-wrap; 保留所有空白，自動換行。</li>
<li>white-space: pre-line; 連續空白，取代成一個空白。這個語法可以會自動將多個空白轉換成一個空白。</li>
</ul>The post <a href="https://sdt.hameba.tw/503/">CSS 文字換行，強迫不換行。</a> first appeared on <a href="https://sdt.hameba.tw">SDT 攻城獅區</a>.]]></content:encoded>
							<wfw:commentRss>https://sdt.hameba.tw/503/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
							</item>
	</channel>
</rss>
