我有一个带换行符的 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 插入的空格。而且标题应该能够右对齐。 我怎样才能让这个跨浏览器兼容?
最佳答案
我最终听从了 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;
}
}
}
关于html - 防止标题换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47309620/