前言:这是最近翻译的一篇文章

我在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文本换行你所不知道的技巧的更多相关文章

  1. 几个你所不知道的技巧助你写出更优雅的vue.js代码

    1. watch 与 computed 的巧妙结合 如上图,一个简单的列表页面. 你可能会这么做: created(){ this.fetchData() }, watch: { keyword(){ ...

  2. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

  3. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  4. 你所不知道的 CSS 阴影技巧与细节

    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...

  5. 你所不知道的SQL Server数据库启动过程,以及启动不起来的各种问题的分析及解决技巧

    目前SQL Server数据库作为微软一款优秀的RDBMS,其本身启动的时候是很少出问题的,我们在平时用的时候,很少关注起启动过程,或者很少了解其底层运行过程,大部分的过程只关注其内部的表.存储过程. ...

  6. 你所不知道的html5与html中的那些事(四)——文本标签

    文章简介:       关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后 ...

  7. 你所不知道的setTimeout

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.它们向任务队列添加定时任务.初始接触它的人都觉得好简单 ...

  8. 你所不知道的html5与html中的那些事第三篇

    文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作 ...

  9. 关于setTimeout()你所不知道的地方,详解setTimeout()

    关于setTimeout()你所不知道的地方,详解setTimeout() 前言:看了这篇文章,1.注意setTimeout引用的是全部变量还是局部变量了,当直接调用外部函数方法时,实际上函数内部的变 ...

随机推荐

  1. android学习日记08--Paint画笔

    Paint 要绘图,首先得调整画笔,待画笔调整好之后,再将图像绘制到画布Canvas上,这样才可以显示在手机屏幕上.Android 中的画笔是 Paint类,Paint 中包含了很多方法对其属性进行设 ...

  2. yii 数据库迁移

    在我们开发程序的过程中,数据库的结构也是不断调整的.我们的开发中要保证代码和数据库库的同步.因为我们的应用离不开数据库.例如: 在开发过程中,我们经常需要增加一个新的表,或者我们后期投入运营的产品,可 ...

  3. ios 入门之Hello World

    1.ios系统的概述与构架ios平台限制集成开发环境介绍第一个程序-hello World应用程序的文件组织模拟器的常用操作应用程序的生命周期 CocoaTouch层UIKit框架:UIKit提供了一 ...

  4. 实例源码--Android高德地图实例源码

      下载源码 技术要点: 1.高德地图 API的使用 2.定位 ,查询路线,公交查询等地图相关技术 3.源码带有非常详 细的中文注释 ...... 详细介绍:  1. 高德地图API的使用 本套实例采 ...

  5. java跨平台性分析

    实不相瞒,Java是我见过的执行效率最低的程序设计语言,前不久在CSDN论坛上有个评测,计算9999的阶乘,同样的循环算法,Java的耗时是.NET的5倍.我以前很喜欢Serv-U,自从它用Java重 ...

  6. Servlet, Listener 、 Filter.

    Java Web的三大组件:Servlet, Listener . Filter. 使用Listener监听器:八大监听器: 第一组:用于监听Servlet三个域对象的创建与销毁 1. Servlet ...

  7. 如何将java代码生成一个bat文件

    java -cp classes;lib/* beans.FileUpload  列出所要带的参数,用空格分开Pause

  8. iframe实现面页无刷新提交表单

    一.表单提交到了哪里? 这似乎是个无知的问题,我们都知道表单提交到服务器,java,php,asp等服务器,然后由服务器去读.那么之后呢,服务器总要返回点什么吧,要么返回 一个xml或json数据,要 ...

  9. C语言位运算符:与、或、异或、取反,左移和右移

    C语言位运算符:与.或.异或.取反.左移和右移 个位操作运算符.这些运算符只能用于整型操作数,即只能用于带符号或无符号的char,short,int与long类型. ,则该位的结果值为1,否则为0 | ...

  10. spark下统计单词频次

    写了一个简单的语句,还没有优化: scala> sc. | textFile("/etc/profile"). | flatMap((s:String)=>s.spli ...