css 换行符,CSS秘密花园: 插入换行符
《CSS Secrets》是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。
需要通过CSS插入换行符的情况,通常出现在list列表定义中,如下图所,
在其它的情况中也有。很多时候我们使用定义列表,是因为我们想要使用恰当的、语义标记,甚至当我们视觉上想要的只是几行name/value对,例如,看看下边的HTML:
- Name:
- Lea Verou
- Email:
- lea@verou.me
- Location:
- Earth
我们想要的视觉效果是类似上图这样的简单的样式。第一步通常是应用一些基础的CSS,如下:
dd {
margin: 0;
font-weight: bold;
}
但是,因为
和是块元素,我们最终得到的是类似下图这样的效果:
name和value各占一行。下一步尝试通常是将
、或两个一起的display属性的值改变,排版经常变得随意混乱,所以我们也变得有些绝望。但是,这样我们经常会得到这样的效果。
在我们开始发狂、埋怨CSS、或者是放弃转移注意力或者去修改我们的HTML,有什么办法能让我们保持理智并维持我们的代码整洁吗?
解决方案
基本上,我们要做的就是在每一个
结束的地方添加换行符。如果我们不介意这些太表象的标签,我们可以直接用
元素来完成,如下:Name:Lea Verou
...
然后,我们分别为
和应用display:inline;,这样就可以完成了。当然,这对于可维护性并不是一个好的习惯,而且还让我们的HTML标签变得臃肿。如果我们可以使用生成内容来添加换行,并且能够有像
元素这样的效果的,那么我们的问题就可以解决了!但是我们不能这样做,对吗?或许可以试试~?
事实上在Unicode中有一个转义字符是等同于换行的:0x000A。在CSS中,可以写成"\000A",或更简单的"\A"。我们可以使用它作为我们的::after伪元素的内容,这样在每个
元素后边加上它,如下:
dd::after {
content: "\A";
}
从技术上说,0x000A对应于“Line Feed”字符,也就是我们在JavaScript中使用的\n。还有一个“Carriage Return”字符(在js中是"\r",在CSS中是"\D"),但是这在现代浏览器中并不需要。
这看起来似乎是可行的,但是如果我们尝试了,结果却是令人失望的:和上图显示的结果并没有什么区别。但是这并不意味着我们的方向错了;我们只是忘了一些东西。我们可以在CSS中完成的,和在HTML标签中添加换行符是一样的,就是在结束标签
之前添加。还记得如果在HTML代码中添加换行符会发生什么吗?默认情况下,它们会随着我们空白的多余部分塌下去。这通常是一个很棒的事情,否则我们就需要把我们的整个HTML页面设置格式为一行了!但是,有时候我们想要保留空格和换行,如在代码块中。记得在这种情况下我们通常是怎么做的吗?应用white-space: pre;。这里同样适用,仅应用它来产生换行符。
我们现在只有一个换行符,所以我们不需要关心空格是否会被保留(因为没有空格),所以任何的pre值都会生效(pre, pre-line, pre-wrap)。我推荐pre,因为它有广泛的浏览器支持。我们来把它们放到一起:
dt, dd { display: inline; }
dd {
margin: 0;
font-weight: bold;
}
dd::after {
content: "\A";
white-space: pre;
}
如果你测试过了,你会看到它是可行的,而且和下图的结果完全一样!
但是,这个东西灵活吗?假设我们想要为我们定义列表中的用户添加第二个电子邮件,如下所示:
...
Email:lea@verou.meleaverou@mit.edu
...
现在结果如下所示,并不太美观。
因为我们在每一个
后边都添加了换行符,每个值都是在单行上显示的,即使有些内容并不需要换行。多个值的话用逗号分隔会比较好,并且放在同一行上(只要有足够的空间)。
理想情况下,我们希望针对最后一个
,在之前的,只针对它添加换行,而不是所有的后边都添加换行。但是,就CSS选择器当前的状态来看,这是不可能的,因为它们不可以在DOM树中直接找到那个元素。我们需要想另一个方法。一个想法是尝试在之前添加换行,而不是在之后。
dt::before {
content: '\A';
white-space: pre;
}
但是,这会导致第一行是空白的,因为选择器也会应用在第一个
上。为了解决这种情况,我们可以尝试使用任何如下的选择器,而不仅是dt:
dt:not(:first-child)
dt ~ dt
dd + dt
我们使用最后一个选择器,因为它在多个
有相同的值时也可以,不像前面两个选择器在这种情况下会出错。我们还要想办法把多个分开,除非这多个值已经使用空格分隔了(这在某些情况下是没有问题的,但不是所有情况都是这样)。理想情况下,我们希望能够告诉浏览器“在前边还有标签的每个标签之前添加一个逗号(也就是说除了第一个标签,其它的标签都在前面添加一个逗号)”,但是同样,对于今天的CSS选择器是不可能的。所以,我们必须在每个前添加逗号。这是我们最终的CSS:
dd + dt::before {
content: '\A';
white-space: pre;
}
dd + dd::before {
content: ', ';
font-weight: normal;
}
效果如下:
记住,如果你的HTML标签中,多个连续的
之间包含(未注释掉的)空格,逗号之前都会有空格。有很多方法可以解决这个问题,但是都不是完美的。例如,负外边距:
dd + dd::before {
content: ', ';
margin-left: -.25em;
font-weight: normal;
}
这是可行的,但是相当站不住脚。如果你的内容显示的是不同的字体,带有不同的度量,空格可能会比0.25em大一些或小一点,这样结果看起来可能就有点过。但是,对于大多数的字体,它们的差异是可以忽略不计的。
css 换行符,CSS秘密花园: 插入换行符相关推荐
- css中的换行符_如何使用CSS防止项目列表中的换行符?
css中的换行符 Introduction: 介绍: Dealing with various items in CSS sometimes pose very different problems. ...
- css表格强制不换行符,css控制table单元格强制换行与强制不换行
css 我们先看一下css手册中,对于list-style地解释: 定义和用法 list-style 简写属性在一个声明中设置所有地列表属性. 说明 该属性是一个简写属性,涵盖了所有其他列表样式属性. ...
- js添加html换行符,javascript – 在contenteditable div中的输入键上插入换行符
我试图插入一个换行符,而不是当我在一个contenteditable div中输入时浏览器想要插入的内容. 我当前的代码看起来像这样: if (e.which === 13) { e.stopProp ...
- 如何在SQL Server VARCHAR / NVARCHAR字符串中插入换行符
我没有看到关于这个主题的任何类似的问题,我不得不研究这个我现在正在做的事情. 以为我会发布答案,以防其他人有同样的问题. #1楼 我来到这里是因为我担心我在C#字符串中指定的cr-lfs没有在SQl ...
- 【Excel】在单元格中插入换行符
引言 本文为大家讲解在 Excel 单元格中单次和批量(需要用到公式)插入换行符的方法. 单次 双击要插入换行符的单元格 单击要换行的位置. 按 Alt+Enter 插入换行符. 批量 Excel 中 ...
- 织梦php汉字字符串中间插入换行符方法
织梦php汉字字符串中间插入换行符方法 function strsub($str) { strcount=mbstrlen(str_count=mb_strlen(strcount=mbstrle ...
- html div 不要超出,css怎么设置div超出不换行?
css怎么设置div超出不换行?下面本篇文章就来给大家介绍一下使用CSS设置div超出不换行的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在css中,可以使用white-s ...
- c语言换行符不起作用,回车符与换行符问题——C语言
回车符(carriage return,'\r')与换行符 (line feed,'\n') 换行对应的ASCII码值是10,回车符对应的ASCII码值是13,需要注意的是用户按下回车键时,对于不同的 ...
- html语言中的换行标签是,什么是换行符标签
HTML语言中换行的代码是什么? 方法有很多,但要做到用的恰到好处 段落标签 一个段落空一行 效果如下: 是默认的换行,在你要换行的地方加进去就行,单个标签 效果如下: 如果有了 --,从到中的内容原 ...
最新文章
- Windows Server 2012关闭Server Manager开机自启动
- 压缩感知 compressive sensing(转)
- Spring MVC 中的 forward 和 redirect
- 服务器如何运行java文件_在linux服务器上运行java文件
- 第八章 流量复制/AB测试/协程
- scala的foreach和for
- 转载:成功应用ERP的思路和方法分析
- django+xadmin在线教育平台(十二)
- 2020.11.18 比赛总结题解合集
- 补剂课堂:补充肌酸的最佳时机
- 租服务器的 直连100m是啥,如何知道我的服务器带宽是独享10M或者100M?
- 如何通过软件编辑自己想要的点阵图片
- jquery 实现的省市区级联,无ajax
- 大数据与BI的联系与区别
- 台式电脑win7旗舰版 怎么调节屏幕亮度 显示器太亮了!
- 分布式文件存储FastDFS介绍安装部署及相关Java代码编写
- 为什么苹果4s用电信卡显示无服务器,电信4G卡插入苹果4S,提示“无服务”
- Java操作word文档将docx转换为pdf格式
- Linux下Rootkit介绍
- [原创]数独解答程序