澳门在线威尼斯官方 > 威尼斯澳门在线 > css文本换行你所不知底的技术,在行内成分前注

原标题:css文本换行你所不知底的技术,在行内成分前注

浏览次数:155 时间:2019-12-12

在行内成分前注入三个换行

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 或然其余什么。

威尼斯澳门在线 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 的局地留在了上风流倜傥行:

威尼斯澳门在线 2

大家得以动用 box-decoration-break: clone; 来修复那几个“侧面缘环绕”的主题材料,可是… 它会促成上风流倜傥行产生越来越大的黑块:(此处不明白的校友可以看以那一件事例——译者注)

威尼斯澳门在线 3

box-decoration-break 对于拍卖部分标题来讲好极了,但不包罗这些难点。

假使大家将 span 变成inline-block,那么换行将会发出在特别块里面,那亦非咱们想要的功力:

威尼斯澳门在线 4

将伪成分设置成块级成分,让 span 保持行内成分,那样也非常:

威尼斯澳门在线 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;
}

威尼斯澳门在线 6

如此那般能够!但是…

本身直接是伪成分本领的簇拥,可是如此用有个别危殆,因为您大概破坏了可访问性。小编认为部分读屏软件会读伪元素,但不是有所的都会,亦非有所的都打算援助。更並且这种办法下你不能够拷贝和粘贴全体的文书,尽管那几个文件完整地涌出在 HTML 文档里。

故而让大家搜求越多的恐怕。

利用 table 布局

自己最赏识的方式是由 Thierry Koblentz 提议的。只必要给 span 设置 display:table; 就可以了。当然那不是当真的报表数据,但无妨。通过 CSS 将成分强迫用 table 布局以利用 table 布局特殊的结构属性,它唯风姿罗曼蒂克的主题素材唯有是——不语义化。

CSS

h1 span { display: table; }

1
2
3
h1 span {
  display: table;
}

威尼斯澳门在线 7

HTML:

在线例子

回顾接受 <br> 的充足例子,那样做也是好的。

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

1 赞 3 收藏 评论

威尼斯澳门在线 8

<h1 class="one">

 Break right after this

 <!-- <br> could go here, but can we do it with CSS? -->

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:css文本换行你所不知底的技术,在行内成分前注

关键词:

上一篇:模块深入探究,cluster模块深入探究

下一篇:AngularJs前端结构