使用(Unicode字符)让inline水平元素换行
2016-01-29 09:03
381 查看
为了实现上面效果:
<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-将光标“垂直”移动到下一行(并不移动到下一行的开头,即不改变光标水平位置)。
http://www.zhangxinxu.com/wordpress/2012/03/tip-css-multiline-display/
相关文章推荐
- counter 计数器
- Chrome 35个开发者工具的小技巧
- 网页 调用 原生应用
- iOS去掉导航栏背景图片和底部线
- MyEclpse 10 Error on Lauch Debug,工程显示红叹号!等问题解决
- html手机滑动事件
- 民谣吉他初学者应该掌握的一些问题
- 对象 遍历 ( for in )
- Linux如何实现开机启动程序详解
- js实现滚动条滚动到某个位置便自动定位某个tr
- 新博客地址 ixindoo.com
- Eclipse插件—Easy Explorer
- angularjs中的filter(过滤器)——格式化日期的date
- groovy 线上修改Java程序的内存
- 高并发Tomcat7.0配置
- underscorejs-every学习
- SQL:内连接、左外连接、右外连接、全连接、交叉连接区别
- 从三国演义谈创业的一点启示
- underscorejs-reject学习
- jqGrid 学习笔记整理——进阶篇(一 )