为了实现上面效果：
<dl>
    <dt>提问：</dt><dd>为什么没有男朋友？</dd>
</dl>
<dl>
    <dt>回答：</dt><dd>男朋友是什么、可以吃吗？</dd>
</dl>
 
原理显而易见：标题元素前换行，去除第一个标签元素前面的换行符。
dt:before {
    content: '\D\A';
    white-space: pre;
}
dt:first-child:before { content: normal; }
 
"\A"就是神奇值所在。包含回车CR和换行LF字符一般都是unicode字符，其可像其他unicode字符一样随便插。它们分别有000D和000A Unicode编码。这就意味着，如果偶们escape内容合理，其就可以像普通内容一样插插插！
//上面这段“CR和LF字符”分别指回车(CR)和换行(LF). 回车CR-将光标移动到 当前行(?) 的开头；换行LF-将光标“垂直”移动到下一行（并不移动到下一行的开头，即不改变光标水平位置）。
 
 

使用(Unicode字符)让inline水平元素换行的更多相关文章

  1. 使用Unicode字符实现换行

    要让inline元素换行可以使用Unicode字符实现: <!DOCTYPE html> <html lang="en"> <head> < ...

  2. decode 函数将字符串从某种编码转为 unicode 字符

    环境:Ubuntu, Python 2.7 基础知识 这个程序涉及到的知识点有几个,在这里列出来,不详细讲,有疑问的直接百度会有一堆的. 1.urllib2 模块的 request 对像来设置 HTT ...

  3. Unicode字符编码表(转)

    Unicode字符编码表     版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/zhenyu5211314/article/details/5153 ...

  4. 使用注释来解决关于inline-block元素换行问题

    昨天群里有人问个问题:为什么button加了文字后,产生了对齐不一致的问题. 原因在于baseline的对齐问题. 然后就有人推荐了一篇文章:关于Vertical-Align你需要知道的事情 其中里面 ...

  5. [转] Unicode字符编码区间表

    firebug 打UTF8 字符: var res = ""; for(var i=0x80;i< 0xff ;i++){ res += i.toString(16) + & ...

  6. 扩展ASCII码，不同的国家有不同的字符集。Unicode转换为utf8的规则，utf8没有大小端的问题。超过0xFFFF的Unicode字符WINAPI也无能为力（附各种字符编码表及转换表）good

    一.概念 1,ASCII             ASCII(American Standard Code for Information Interchange),中文名称为美国信息交换标准代码.是 ...

  7. CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

  8. HTML、CSS、JS对unicode字符的不同处理

    unicode字符的不同表示法 unicode字符在html.css和js中的表示方法均不相同,下面分别作介绍. 原文发表于这里 css表示法 首先来一段很常见的bootstrap的字体图标代码: . ...

  9. Java 经典实例： Unicode字符和String之间的转换

    在Java诞生之际,Unicode码是一个16位的字符集,因此char值似乎顺其自然为16位宽,多年来一个char变量几乎可以表示任何Unicode字符. /** * Created by Frank ...

随机推荐

  1. JAVA 局部变量表

    1. 除了 long,double 占用两个slot 之外,其他类型均占用一个slot. 2.在内容相同的情况下, 实例方法(不加 static) 会比 类方法 (static)对占用一个局部变量位置 ...

  2. Delphi系列书籍pdf 118本 网友吐血整理

    第一步:进入官网首页http://bulo.hujiang.com/home/ 第二部:home/替换u/779988/diary/627936/ 来自沪江部落

  3. JS 数据处理技巧及小算法汇总( 一）

    前言: 金秋九月的最后一天,突然发现这个月博客啥也没更新,不写点什么总觉得这个月没啥长进,逆水行舟,不进则退,前进的路上贵在坚持,说好的每个月至少一到两篇,不能半途而废!好多知识写下来也能加深一下自身 ...

  4. 简易RPC框架-心跳与重连机制

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  5. __无标题栏的窗口拖动___javafx

    遇到困难::添加mouseevent监听,我用的mouse_DragedDetected配合MouseEvent.Pressed,,闪的不行,后来借鉴swing的pressed,move,releas ...

  6. JS封装运动框架（另一种写法）

    function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); //var k = 0; //var j = 0; ...

  7. HDU1068 二分匹配 独立集

    前边和后边性别不同!!!不然NP了 Girls and Boys Problem Description the second year of the university somebody star ...

  8. zoj 1539 Lot 简单DP 记忆化

    Lot Time Limit: 2 Seconds      Memory Limit: 65536 KB Out of N soldiers, standing in one line, it is ...

  9. Java面向对象 IO （三）

     Java面向对象  IO  (三) 知识概要:                    (1)IO 流的操作规律                    (2)异常日志信息IO处理          ...

  10. 【转载】基于vw等viewport视区相对单位的响应式排版和布局

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...