制作自适应换行的排版效果制作自适应换行的排版效果

前言这个标题大家看着可能摸不着头脑，先简单普及几个定义。
在html中，文字换行有两种类型，一个是块级标签定义段落。比如说第一段到这一段之间的换行，就是两个标签（或者两个标签）。简而言之，一个到<\p>之间就是一个完整的自然段。段与段之间的间距，就是段间距，可以通过定义或者的margin来控制。
另外一种就是，这个实际上是一个行内标签（in-line），也就是只能在一个段落内部起作用的标签，不能跨段落使用。这个标签的作用是之间换行，但是换行后的两段文字还是被视为一段文字的，所以这两段文字之间的间距只是行间距，也就是一个自然段内上下两行文字的间距。
不同设备的自动换行对于阅读器而言，它会根据设备的宽度来自动给文字换行，相当于程序自动在设备边缘给文字加了个标签。
不同的设备，因为宽高比和分辨率不一样，自动换行的长度也不一样，下面是一个对比图。

平板宽度
这是宽高比为4:3的平板上多看的自动换行效果，大概是二十三个字符左右。当然如果你手动放大文字字号，字符数也会相应减少。
手机宽度
这是宽高比为16:9的手机上多看的自动换行效果，可以看到手机的长度更长，但相应的宽度只有十七个字符就要自动换行。
诗歌的自动换行实例举个实际的例子。如下图所示，

平板诗歌
这个是平板上显示诗歌的排版，对于七言绝句而言，一行显示两句，总共显示两行是典型的排版。但是这个排版到了手机上就是这个样子了：

手机诗歌
原因就是上面所说，手机宽度较小，所以产生了自动换行。
当然我们可以用一个折中的办法，就是诗歌固定一句一行，如下图，
诗歌一句一行
这样一来平板和手机默认字体显示的就都不会自动换行了（当然手动放大字号肯定会自动换行，这个没法避免，我们只能保证默认字体的自适应），但是我们可以比较一下，这样一来牺牲的是平板设备两侧的空余空间，如果字体较小的话，排版还是显得不够均匀。
自适应换行排版我们的目标是在平板上能显示第三张图的效果，而在手机上又能自动切换为上一张图的效果。简而言之，就是不要让程序在设备边缘自动换行，而让它在我们想要的地方自动换行。
实际操作的代码如下：

- 锐客网.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; }《出塞》·王昌龄【制作自适应换行的排版效果】秦时明月汉时关，万里长征人未还。但使龙城飞将在，不教胡马度阴山。

平板的显示效果还是同第三张图，而放到手机上显示效果如下。

自适应换行我们看一下代码，实际上要关注的只有两个地方，第一是诗歌的属性中，需要有white-space: nowrap这个属性，不允许自动换行，第二是在诗歌本身段落中，在需要成为整句的地方用行内标签括起来（span或者a都可以），这样一来，在手机上程序就会优先从span之间进行自动换行了。
可以看到前两句和后两句之间的间距较大，这个原因在前言里已经说明了，第一二句之间实际上是

标签，而二三句之间是标签，二者的行距定义不同。
要解决这个问题，可以在诗歌属性中定义line-height，这控制了

标签的行距，也可以去掉诗歌段落中的标签。但要注意，如果平板宽度较大，可能出现第一行三句第二行一句的情况。
总结本篇的自适应换行技巧当然也有缺点，它比较适合用于古典诗歌文学，尤其是每句字数固定的，否则就可能出现每一行换行不一致的情况。
当然这个技巧不光可以用于诗歌，也可以用于章节标题等特定设计，因为其本质是让段落在我们想要的地方自动换行。会不会玩崩还是要看排版的调整。