&nbs p;
一、前言
本文主要目的是展示新技术，开阔眼界，抛砖引玉，触发新灵感。至于方法的适用性另当别论。
二、引子
对于下面这个类似1+1的效果（就里面两行文字，红框框和风骚的投影是截图软件加上的），你会如何实现？
从语义上来讲，这里使用定义标题最为合适，具体结构和样式呢？下面展示几个技术实现：
每个键值对都使用一个 dl 。如下：
<dl> <dt>提问：</dt><dd>为什么没有男朋友？</dd> </dl> <dl> <dt>回答：</dt><dd>男朋友是什么、可以吃吗？</dd> </dl>
这种感觉就像中式英语” you eat what? “，为效果使用不准确的结构。 使用浮动。
dt { float: left; } dd { margin-left: 0; } 但是，浮动这东西是个魔鬼，破坏流体布局，易抽风。就拿这个例子来说，上面的代码看似没有可疑之处，实际上，在浏览器下的效果如下（由于图片默认基线对齐，文字下沉了）：
使用 display: run-in;
dt { display: run-in; } dd { margin-left: 0; } 有人可能对 display: run-in; 声明不是很了解，这个声明实现效果是需要条件的：如果 display:run-in 的box后面跟着一个 display 为 block 水平的box，那么这个应用了 display:run-in 的box将会变成 display:inline 属性，同时内容嵌入到后面的 display 为 block 的box中；否则这个 display:run-in 的box维持其本身的 block 属性。
上面生涩的释义没看懂？正好，直接顾名思意：当前元素 跑-进(run-in) 后面的元素。
这个方法实现这里的效果可谓相当适合。不过， 兼容性糟糕 这个硬伤影响了其普及。目前为止，FireFox浏览器还没有支持该属性。 IE9+, Chrome, Opera(最早支持)都是支持的。
补充于2016-06-27
感谢ca5h的谏言，经测试，确实Chrome浏览器已经不支持 run-in , MDN显示是Chrome32版本开始不支持的。为何不支持了，我目前还没有深究，日后等有机会接触再补上。
为了让大家对该声明有具象的情感化认知，我做了个demo，您可以狠狠地点击这里：display:run-in应用demo
对于支持的浏览器，例如IE9，就是下面效果:
对于不支持的（如FF）就是下面这副德行：
在每个 dd 后面使用 <br /> ，当然， dt , dd 要设置成 inline 水平的。不过嘛，从合法性上将，block水平后面的 <br /> 是不合法的~~
可见，貌似可用的技术啊方法，很多，都有美中不足之处，那还有没有其他好的解决之道呢？
三、借助Unicode字符， CSS 实现换行
关键CSS代码就是下面：
dd :after { content: '/A'; wh IT e -s pace: PR e; } 上面 "/A" 就是神奇值所在。包含换行符的CR和LF字符 ① 一般都是unicode字符，其可像其他unicode字符一样随便插。它们分别有000D和000A Unicode编码。这就意味着，如果偶们esca PE 内容合理，其就可以像普通内容一样插插插！
//zxx: 上面这段上标为①处的“CR和LF字符”分别指回车(CR)和换行(LF). 回车CR-将 光标 移动到 当前行(?) 的开头；换行LF-将光标“垂直”移动到下一行（并不移动到下一行的开头，即不 改变 光标水平位置）。
上面的代码纯粹CSS2.1的东西，与CSS3没有直系血缘。
您可以狠狠地点击这里：CSS下的inline元素换行demo
代码很短，这里也完整展示下：
dd, dt { dis play : inline; m arg in: 0; } dd:after { content: '/A'; white-space: pre; }
<dl> <dt>提问：</dt><dd>为什么没有男 朋友 ？</dd> <dt>回答：</dt><dd>男朋友 是什么 、可以 吃 吗？[抠鼻图片][抠鼻图片]</dd> </dl>
因为使用了after 伪类 ，因此上面方法支持的浏览器为IE8+，以及其他靠谱浏览器。经过自己的测试，content内容只能是 "/A" 或者 需要包括 "/A" ，大小写无妨。
进一步改进
上面的技 术 很新颖，来自Lea Verou, 不过 有人对其方法进行了改进。 原因 是：有可能 dd 元素不止一个。
其改进后的CSS代码如下：
dt:before { content: '/D/A'; white-space: pre; } dt: First -child:before { content: normal; } 原理显而易见：标题元素前换行，去除第一个 标签元素 前面的换行符。
参考 文章 ：Flexible multiline definition lists with 2 lines of CSS 2.1
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-小tip: 使用CSS(Unicode字符)让inline水平元素换行 全部内容，希望文章能够帮你解决 html5教程-小tip: 使用CSS(Unicode字符)让inline水平元素换行 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-小tip: 使用CSS(Unicode字符)让inline水平元素换行的详细内容...