css文本换行你所不知道的技巧
前言:这是最近翻译的一篇文章
我在header标签开头忘里边加入一个span标签的时候,有一点小问题。我总是想确保在span标签之前能够换行。明确地讲,在标签前边加入<br> 并没有什么错误。(事实上这是非常有用的办法)。但是用HTML标签实现这个效果总让人觉得怪怪的。
所以让我们探索更多的可能。
HTML:
<h1 class="one">
Break right after this
<!-- <br> could go here, but can we do it with CSS? -->
<span>
and before this
</span>
</h1>
用块级元素实现它
除了<span> ,我们可以用<div>,我们只需用div的默认块级特性来实现它。
但是考虑到设计和语义,我们用span更好些。在文字换行处,我们可以使用inline/inline-block,因为方便我们设置background和padding值等等
在换行处使用伪元素
很简单:
css
h1 span::before {
content: "\A";
}
但是,这个<span> 是一个行内元素。换行没有效果。
我们可以通过设置white-space: pre来强迫它换行
h1.two span::before {
content: "\A";
white-space: pre;
}
这样做确实换行了,但是由于padding和background的原因,在换行的时候留了一个黑块,
我们可以通过使用 box-decoration-break: clone修复这个尴尬的左边黑块,但是,结果却是产生了一个更大的黑块。
box-decoration-break对一些问题非常有效,但是在这里失效了。
如果我们给这个span设置成inline-block,这个断行出就会和块级元素在一行,也不是我们想要的结果:
让这个伪元素块级化和单独使用span也没有效果:
利用伪元素
这是亚伦-布什内尔的想法。这个窍门是让span块级化,但是通过伪元素给它同时添加文字和样式让他也是一个行内元素。
css
h1 span {
display: block;
}
h1 span::before {
content: attr(data-text);
background: black;
padding: 1px 8px;
}
我一直很喜欢利用伪元素来做一些技巧,但是这种方法可能会有点危险,如果你使用不好的话。我想一些屏幕阅读器可以读出伪元素,但是也不完全。是,他们也不会故意这样做。更不要说你不能复制和粘贴所有的文字,这种方式。至少文本仍然保持完全的HTML!
利用表格布局
我最喜欢的方法是来自蒂埃里科布伦茨。仅仅给span设置:display: table;你完成之后。这不是表格数据,但是这不重要。你需要清楚的是强制使用css的表格布局是利用表格的独有特性。这并不具有语义。
css
h1 span {
display: table
英文出处:https://css-tricks.com/injecting-line-break/
css文本换行你所不知道的技巧的更多相关文章
- 几个你所不知道的技巧助你写出更优雅的vue.js代码
1. watch 与 computed 的巧妙结合 如上图,一个简单的列表页面. 你可能会这么做: created(){ this.fetchData() }, watch: { keyword(){ ...
- 你所不知道的 CSS 滤镜技巧与细节
承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- 你所不知道的 CSS 阴影技巧与细节
关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...
- 你所不知道的SQL Server数据库启动过程,以及启动不起来的各种问题的分析及解决技巧
目前SQL Server数据库作为微软一款优秀的RDBMS,其本身启动的时候是很少出问题的,我们在平时用的时候,很少关注起启动过程,或者很少了解其底层运行过程,大部分的过程只关注其内部的表.存储过程. ...
- 你所不知道的html5与html中的那些事(四)——文本标签
文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后 ...
- 你所不知道的setTimeout
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.它们向任务队列添加定时任务.初始接触它的人都觉得好简单 ...
- 你所不知道的html5与html中的那些事第三篇
文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作 ...
- 关于setTimeout()你所不知道的地方,详解setTimeout()
关于setTimeout()你所不知道的地方,详解setTimeout() 前言:看了这篇文章,1.注意setTimeout引用的是全部变量还是局部变量了,当直接调用外部函数方法时,实际上函数内部的变 ...
随机推荐
- android学习日记08--Paint画笔
Paint 要绘图,首先得调整画笔,待画笔调整好之后,再将图像绘制到画布Canvas上,这样才可以显示在手机屏幕上.Android 中的画笔是 Paint类,Paint 中包含了很多方法对其属性进行设 ...
- yii 数据库迁移
在我们开发程序的过程中,数据库的结构也是不断调整的.我们的开发中要保证代码和数据库库的同步.因为我们的应用离不开数据库.例如: 在开发过程中,我们经常需要增加一个新的表,或者我们后期投入运营的产品,可 ...
- ios 入门之Hello World
1.ios系统的概述与构架ios平台限制集成开发环境介绍第一个程序-hello World应用程序的文件组织模拟器的常用操作应用程序的生命周期 CocoaTouch层UIKit框架:UIKit提供了一 ...
- 实例源码--Android高德地图实例源码
下载源码 技术要点: 1.高德地图 API的使用 2.定位 ,查询路线,公交查询等地图相关技术 3.源码带有非常详 细的中文注释 ...... 详细介绍: 1. 高德地图API的使用 本套实例采 ...
- java跨平台性分析
实不相瞒,Java是我见过的执行效率最低的程序设计语言,前不久在CSDN论坛上有个评测,计算9999的阶乘,同样的循环算法,Java的耗时是.NET的5倍.我以前很喜欢Serv-U,自从它用Java重 ...
- Servlet, Listener 、 Filter.
Java Web的三大组件:Servlet, Listener . Filter. 使用Listener监听器:八大监听器: 第一组:用于监听Servlet三个域对象的创建与销毁 1. Servlet ...
- 如何将java代码生成一个bat文件
java -cp classes;lib/* beans.FileUpload 列出所要带的参数,用空格分开Pause
- iframe实现面页无刷新提交表单
一.表单提交到了哪里? 这似乎是个无知的问题,我们都知道表单提交到服务器,java,php,asp等服务器,然后由服务器去读.那么之后呢,服务器总要返回点什么吧,要么返回 一个xml或json数据,要 ...
- C语言位运算符:与、或、异或、取反,左移和右移
C语言位运算符:与.或.异或.取反.左移和右移 个位操作运算符.这些运算符只能用于整型操作数,即只能用于带符号或无符号的char,short,int与long类型. ,则该位的结果值为1,否则为0 | ...
- spark下统计单词频次
写了一个简单的语句,还没有优化: scala> sc. | textFile("/etc/profile"). | flatMap((s:String)=>s.spli ...