html - 使用媒体查询删除标签也会删除标签前后的空格

Question

我需要控制标题的换行符。我有一个 CSS 类来控制我的<br>标签的可见性。例如：

@media only screen and (max-width: 600px) {
    .hide-on-mobile {
        display: none
    }

<h1>My long header that needs to have <br class="hide-on-mobile"> a break on desktop</h1>

媒体查询<br>按预期隐藏了标签，但它也隐藏了标签后的空格。结果，“have”和“a”这两个词在移动设备上一起运行。我可以 在标签的任一侧添加一个<br>，但它会通过一个空格来混淆对齐。

关于替代解决方案的任何想法？

标签： htmlcss

Answer 1

你能用span代替br吗？或任何其他标签。断词使用display: block;，删除 -display: inline;