Html 如何使句子的整个部分在调整大小时下移

我在h1标签里有一个句子。在resize上，我希望最后三个单词跳到一起，而不是一次跳一个，因为最后三个单词是一个口号，如果它们分开就没有意义了。是现场直播

以下是HTML：

<header class="header" role="banner">
    <div id="inner-header" class="wrap clearfix">
       <div id="title">
       <!-- to use a image just replace the bloginfo('name') with your img src and remove the surrounding <p> -->
        <h1 id="logo" class="h1">
                <a href="<?php echo home_url(); ?>" rel="nofollow">
                    <?php bloginfo('name'); ?><span class="subtitle">
                    <?php bloginfo('description'); ?></span>
                </a>
            </h1>
       </div>
    <nav role="navigation">
       <?php bones_main_nav(); ?>
    </nav>
</div> <!-- end #inner-header -->

试试这个：

.subtitle {
    display: inline-block;
    font-size: 0.3em; 
    margin-left: 1em;
}

将

显示

设置为

内联块

将使元素的内容保持在一起（这是

块

元素的行为），但仍将其与其他文本保持内联

您还应该考虑进行一些其他调整，以便标题可以100%宽度，并且导航仍然可以正确定位：

#logo {
    margin: 80px 0 0;
}
.header #title {
    height: 289px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}
.header .nav {
    display: inline;
    float: right;
    width: 100%;
}
.header .nav ul {
    /* Add the .clearfix class to this ul */
}

---

我们在这里讨论的是响应性的

@media

查询。有几种方法可以做到这一点，但这是最快的：

将此规则添加到您的SCS：

@media only screen and (max-width: 768px) {
    .subtitle{
        display: block;
    }
}

在一边 Bones随其他scss文件一起提供，对于常规样式，请编辑

\u base.scss

，但是对于调整大小编辑文件（如

\u 768up.scss

）上的自定义样式，也请阅读

style.scss

文件中的信息，以获取有关媒体查询的更多信息。Bones附带了一个很棒的文档

进一步阅读

---

如果您正在考虑让您的站点响应，那么您有更好的解决方案，请查看我的答案

@media only screen and (max-width: 768px) {
    .subtitle{
        display: block;
    }
}