使用媒体查询删除<br/>标记还会删除<br/>标记之前和之后的空格

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>，但是它会将对齐方式弄乱了一个空格。

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

Answer 1

您可以使用span代替br吗？或任何其他标签。要打断单词，请使用display: block;，将其删除-display: inline;