前言
這個標題大家看著可能摸不著頭腦氛悬，先簡單普及幾個定義黔姜。
在html中剃浇，文字換行有兩種類型巾兆，一個是塊級標簽定義段落。比如說第一段到這一段之間的換行虎囚，就是兩個<p>標簽（或者兩個<div>標簽）角塑。簡而言之，一個<p>到<\p>之間就是一個完整的自然段淘讥。段與段之間的間距吉拳，就是段間距，可以通過定義<p>或者<div>的margin來控制适揉。
另外一種就是<br/>，這個實際上是一個行內標簽（in-line）煤惩，也就是只能在一個段落內部起作用的標簽嫉嘀，不能跨段落使用。這個標簽的作用是之間換行魄揉，但是換行后的兩段文字還是被視為一段文字的剪侮，所以這兩段文字之間的間距只是行間距，也就是一個自然段內上下兩行文字的間距。
不同設備的自動換行
對于閱讀器而言瓣俯，它會根據(jù)設備的寬度來自動給文字換行杰标，相當于程序自動在設備邊緣給文字加了個<br/>標簽。
不同的設備彩匕，因為寬高比和分辨率不一樣腔剂，自動換行的長度也不一樣，下面是一個對比圖驼仪。
這是寬高比為4:3的平板上多看的自動換行效果掸犬，大概是二十三個字符左右。當然如果你手動放大文字字號绪爸，字符數(shù)也會相應減少湾碎。
這是寬高比為16:9的手機上多看的自動換行效果，可以看到手機的長度更長奠货，但相應的寬度只有十七個字符就要自動換行介褥。
詩歌的自動換行實例
舉個實際的例子。如下圖所示递惋，
這個是平板上顯示詩歌的排版柔滔，對于七言絕句而言，一行顯示兩句丹墨，總共顯示兩行是典型的排版廊遍。但是這個排版到了手機上就是這個樣子了：
原因就是上面所說，手機寬度較小贩挣，所以產(chǎn)生了自動換行喉前。
當然我們可以用一個折中的辦法，就是詩歌固定一句一行王财，如下圖卵迂，
這樣一來平板和手機默認字體顯示的就都不會自動換行了（當然手動放大字號肯定會自動換行，這個沒法避免绒净，我們只能保證默認字體的自適應）见咒，但是我們可以比較一下，這樣一來犧牲的是平板設備兩側的空余空間挂疆，如果字體較小的話改览，排版還是顯得不夠均勻。
自適應換行排版
我們的目標是在平板上能顯示第三張圖的效果缤言，而在手機上又能自動切換為上一張圖的效果宝当。簡而言之，就是不要讓程序在設備邊緣自動換行胆萧，而讓它在我們想要的地方自動換行庆揩。
實際操作的代碼如下：
<head>
<title></title>
<style type="text/css">
.title {
font-size: 100%;
text-align: center;
}
blockquote p {
font-family:"DK-KAITI",楷體, "kt", sans-serif;
text-indent: 0em;
text-align: center;
white-space: nowrap;
}
</style>
</head>
<body>
<p class="title">《出塞》·王昌齡</p>
<blockquote>
<p><span>秦時明月漢時關，</span><span>萬里長征人未還。</span></p>
<p><span>但使龍城飛將在订晌，</span><span>不教胡馬度陰山虏辫。</span></p>
</blockquote>
</body>
</html>
平板的顯示效果還是同第三張圖，而放到手機上顯示效果如下锈拨。
我們看一下代碼砌庄，實際上要關注的只有兩個地方，第一是詩歌的屬性中推励，需要有white-space: nowrap這個屬性鹤耍，不允許自動換行，第二是在詩歌本身段落中验辞，在需要成為整句的地方用行內標簽括起來（span或者a都可以）稿黄，這樣一來，在手機上程序就會優(yōu)先從span之間進行自動換行了跌造。
可以看到前兩句和后兩句之間的間距較大杆怕，這個原因在前言里已經(jīng)說明了，第一二句之間實際上是<br/>標簽壳贪，而二三句之間是<p>標簽陵珍，二者的行距定義不同。
要解決這個問題违施，可以在詩歌屬性中定義line-height互纯，這控制了<br/>標簽的行距，也可以去掉詩歌段落中的<p>標簽磕蒲。但要注意留潦，如果平板寬度較大，可能出現(xiàn)第一行三句第二行一句的情況辣往。
總結
本篇的自適應換行技巧當然也有缺點兔院，它比較適合用于古典詩歌文學，尤其是每句字數(shù)固定的站削，否則就可能出現(xiàn)每一行換行不一致的情況坊萝。
當然這個技巧不光可以用于詩歌，也可以用于章節(jié)標題等特定設計许起，因為其本質是讓段落在我們想要的地方自動換行十偶。會不會玩崩還是要看排版的調整。
