1. 首页
  2. css

CSS插入换行符

我有一个小情况,我有一个头球与跨度,我想确保把一个线突破之前的跨度。作为记录,在它前面插入一个标签并没有什么问题(事实上,显示/隐藏这个标签的功能非常有用)。但是…使用HTML来实现布局总是有点奇怪。让我们去旅行吧。我们经常说\”但是…\”的旅程,我们可以使用一个,我们可以通过div作为一个块级元素来获得突破,但是我们故意使用一个span,因为设计。打断后的文本应该是inline/inline块,因为它将有背景和填充等。您可以通过伪元素插入换行符
很简单:
h1 span::before {content: \”A\”;}
但是是一个inline元素。断线没用!就像真正的换行符不会起任何作用一样。
我们可以通过使空格有意义来强制换行符起作用…
h1.two span::before {content: \”A\”;white-space: pre;}
。但是…由于填充和背景的原因,在换行时会留下一小部分内容:
我们可以用box-decoration-break: clone;来修复尴尬的左边缘拥抱,但是…这只会在上面留下一个更大的块:框装饰中断对于某些问题来说是很好的,但对于这个问题就不是了。
如果我们创建了span inline块,中断将发生在该块中,这也不是我们想要的:
创建伪元素块级别并单独保留跨距也不起作用:您可能会有点奇怪,并用伪元素注入实际文本
这是亚伦·布什内尔的想法。这里的技巧是将span块设置为级别,然后用伪元素注入文本,并将其样式设置为内联元素。
h1 span {display: block;}h1 span::before {content: attr(data-text);background: black;padding: 1px 8px;}它可以工作!但是…
我一直是伪元素欺骗的粉丝,但是这感觉有点危险,因为你可能会伤害到可访问性。我认为有些屏幕阅读器读伪元素,但我不认为所有,也不应该。更不用说你不能用这种方式复制和粘贴所有的文本了。至少文本仍然完全保持在HTML中!我最喜欢的想法来自Thierry Koblentz。只要做8次,你就完成了。当然,这不是表格数据,但这并不重要。您可以从CSS中强制表布局,这完全是为了利用表布局的独特布局属性,而不是语义。
h1 span {display: table;}
Live Demos
包括一个我们只使用的示例,这很好。

CSS插入换行符 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%8f%92%e5%85%a5%e6%8d%a2%e8%a1%8c%e7%ac%a6/