Question

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

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

（代码段似乎忽略了媒体查询）。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

我最终听完了Tim Medora的建议（谢谢！）。 br上的伪元素不是crossbrowser，例如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;
        }
    }
}

Answer 2

如果您将标题保持正常间距并将display:none放在您希望它打破的每个单词后面，则每行左侧都会留一个空格，这是可以的，因为您希望它对齐在右边。然后在<br>上以适当的屏幕尺寸添加h1 { text-align: right; } @media screen and (max-width: 839px) { h1 br{ display:none; } }。

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

mysqladmin --defaults-file="/etc/mysql/debian.cnf" --local flush-error-log flush-engine-log flush-general-log flush-slow-log

防止标题

2 个答案: