在行内元素前注入一个换行

2016/06/28 · CSS ·
行内元素

原文出处: Chris
Coyier   译文出处:众成翻译   

我遇到了一个小问题,我有一个 span 在 header 中,而我想要在 span
的前面产生一个换行。郑重声明,在 span 前面插入一个 <br>
标签当然没问题(而事实上,你还可以显示/隐藏这个标签,这非常有用)。但是…不得不用
HTML 去做一个布局相关的事情始终感觉有点奇怪。

因此,让我们来深入探索一下,在这个探索中,我们会多次说到“然而…”。

XHTML

<h1 class=”one”> Break right after this <!– <br> could
go here, but can we do it with CSS? –> <span> and before this
</span> </h1>

1
2
3
4
5
6
7
8
9
10
11
<h1 class="one">
 
  Break right after this
 
  <!– <br> could go here, but can we do it with CSS? –>
 
  <span>
    and before this
  </span>
 
</h1>

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

块级元素能做到

不同于 `,我们可以使用一个

`,而之所以用 div
可以是因为它是一个块级元素。

但是我们有使用 span 的理由,因为设计上要求我们用
span。在换行之后的文本应该是一个行内/行内块元素,因为我们可能想给它一个背景或者
padding 或者其他什么。

永利开户送38元体验金 1

 

你可以通过伪元素插入换行

这很容易:

CSS

h1 span::before { content: “\A”; }

1
2
3
h1 span::before {
  content: "\A";
}

然而… “
是一个行内元素。换行不会产生任何效果!就像真正的回车换行一样不产生。

我们可以通过样式让空白符生效,来强制让换行有效…

CSS

h1.two span::before { content: “\A”; white-space: pre; }

1
2
3
4
h1.two span::before {
  content: "\A";
  white-space: pre;
}

这样实际有效果了。然而… 由于 padding 和背景存在,它把左 padding
的部分留在了上一行:

永利开户送38元体验金 2

我们可以使用
box-decoration-break: clone;
来修复这个“左边缘环绕”的问题,然而…
它会导致上一行产生更大的黑块:(此处不明白的同学可以看这个例子——译者注)

永利开户送38元体验金 3

box-decoration-break 对于处理一些问题来说好极了,但不包括这个问题。

如果我们将 span 变成
inline-block,那么换行将会发生在那个块里面,这也不是我们想要的效果:

永利开户送38元体验金 4

将伪元素设置成块级元素,让 span 保持行内元素,这样也不行:

永利开户送38元体验金 5

我在header标签开头忘里边加入一个span标签的时候,有一点小问题。我总是想确保在span标签之前能够换行。明确地讲,在标签前边加入<br> 并没有什么错误。(事实上这是非常有用的办法)。但是用HTML标签实现这个效果总让人觉得怪怪的。

你可能会有点奇怪,为何不直接将实际的文本写在伪元素里

这是 Aaron Bushnell
想出的办法。这个技巧是让
span
成为块级元素,然后把文本通过伪元素插入进去,以伪元素作为行内元素添加样式。

CSS

h1 span { display: block; } h1 span::before { content: attr(data-text);
background: black; padding: 1px 8px; }

1
2
3
4
5
6
7
8
h1 span {
  display: block;
}
h1 span::before {
  content: attr(data-text);
  background: black;
  padding: 1px 8px;
}

永利开户送38元体验金 6

这样可以!然而…

我一直是伪元素技巧的簇拥,但是这么用有点危险,因为你可能破坏了可访问性。我认为一些读屏软件会读伪元素,但不是所有的都会,也不是所有的都打算支持。更何况这种方式下你不能拷贝和粘贴所有的文本,尽管这些文本完整地出现在
HTML 文档里。

所以让我们探索更多的可能。

利用 table 布局

我最喜欢的方式是由
Thierry Koblentz 提出的。只需要给 span 设置 display:table;
就行了。当然这不是真正的表格数据,但没关系。通过 CSS 将元素强制用 table
布局以利用 table 布局独特的布局属性,它唯一的问题仅仅是——不语义化。

CSS

h1 span { display: table; }

1
2
3
h1 span {
  display: table;
}

永利开户送38元体验金 7

HTML:

在线例子

包括使用 <br> 的那个例子,那样做也是好的。

例子:在一个 header
元素中的行内元素前尝试插入一个换行。

1 赞 3 收藏
评论

永利开户送38元体验金 8

<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值等等

永利开户送38元体验金 9

在换行处使用伪元素

很简单:

css

h1 span::before {

 content: “\A”;

}

 

但是,这个<span> 是一个行内元素。换行没有效果。

我们可以通过设置white-space: pre来强迫它换行

h1.two span::before {

 content: “\A”;

 white-space: pre;

}

这样做确实换行了,但是由于padding和background的原因,在换行的时候留了一个黑块,

永利开户送38元体验金 10

我们可以通过使用 box-decoration-break:
clone修复这个尴尬的左边黑块,但是,结果却是产生了一个更大的黑块。

永利开户送38元体验金 11

box-decoration-break对一些问题非常有效,但是在这里失效了。

 

如果我们给这个span设置成inline-block,这个断行出就会和块级元素在一行,也不是我们想要的结果:

 

永利开户送38元体验金 12

 

让这个伪元素块级化和单独使用span也没有效果:

永利开户送38元体验金 13

 

利用伪元素

这是亚伦-布什内尔的想法。这个窍门是让span块级化,但是通过伪元素给它同时添加文字和样式让他也是一个行内元素。

css

h1 span {

 display: block;

}

h1 span::before {

 content: attr(data-text);

 background: black;

永利开户送38元体验金, padding: 1px 8px;

}

永利开户送38元体验金 14

 

我一直很喜欢利用伪元素来做一些技巧,但是这种方法可能会有点危险,如果你使用不好的话。我想一些屏幕阅读器可以读出伪元素,但是也不完全。是,他们也不会故意这样做。更不要说你不能复制和粘贴所有的文字,这种方式。至少文本仍然保持完全的HTML!

 

利用表格布局

我最喜欢的方法是来自蒂埃里科布伦茨。仅仅给span设置:display:
table;你完成之后。这不是表格数据,但是这不重要。你需要清楚的是强制使用css的表格布局是利用表格的独有特性。这并不具有语义。

css

h1 span {

 display: table

 

英文出处:

相关文章