html - 防止标题换行

Question

我有一个带换行符的 h1。在移动设备上，不应有换行符。

此代码适用于 Chrome 和 iPhone，但不适用于 Firefox。所以恐怕它可能不适用于所有设备/浏览器。

(代码片段似乎忽略了媒体查询)。

h1 {
  text-align: right;
}

@media screen and (max-width: 839px) {
	h1 {
		br {
			content: "";
			&:after {
				content: " ";
			}
		}
	}
}

<h1>This is a<br>header<br>with line breaks</h1>

注意当标题位于 1 行时由 CSS 插入的空格。而且标题应该能够右对齐。我怎样才能让这个跨浏览器兼容？

Answer 1

我最终听从了 Tim Medora 的建议(谢谢!)。br 上的伪元素不跨浏览器，例如 FF 和 iE 不会响应。

我调整了我的 CMS(我在 TYPO3 中构建了一个 PHP viewHelper)，它将换行符转换为跨度。

$textBreakParts = explode("\n", $text);
$convertedText = "<span>".implode('</span> <span>', $textBreakParts)."</span>";

在 SASS 中:

h1 span {display: block}

@media screen and (max-width: 839px) {
    h1 {
        span {
            display: inline;
        }
    }
}