Question

我在h1标签中有一个句子。在调整大小时，我希望最后三个单词不是一次一个地跳下来，因为最后三个单词是标语，如果它们分开则没有意义。 Here是直播网站。

这是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 -->

和scss：

.header {
    #title {
        @include span-columns(23 ,24); 
        position: absolute; 
        top: 30px;
        text-align: center;
    }
    .subtitle {
        font-size: 0.3em; 
        margin-left: 1em;
    }
    .nav { 
        @include span-columns(24 omega ,24); 
        margin-top: 289px;
    }
    #logo {
        a { 
           color: #fff; 
           font-family: 'Pacifico', cursive; /*font-size: 2.5em;*/ 
           text-shadow: 0px 0px 0 #B6CEBF,
                        0.707px 0.707px 0 #B6CEBF,
                        1.414px 1.414px 0 #B6CEBF, 
                        2.121px 2.121px 0 #B6CEBF, 
                        2.828px 2.828px 0 #B6CEBF, 
                        3.536px 3.536px 0 #B6CEBF, 
                        4.243px 4.243px 0 #B6CEBF, 
                        4.95px 4.95px 0 #B6CEBF, 
                        5.657px 5.657px 0 #B6CEBF, 
                        6.364px 6.364px 0 #B6CEBF, 
                        7.071px 7.071px 0 #B6CEBF;
        }
    }
}

Answer 1

试试这个：

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

将display设置为inline-block会将元素的内容保持在一起（block元素的行为），但仍然将其与其他文本内联。

您还应该考虑进行一些其他调整，以便标题可以是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 */
}

Answer 2

我们在这里讨论响应式@media查询。有几种方法可以做到这一点，但这是最快的：

将此规则添加到scss：

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

除了

Bones附带其他scss文件，编辑_base.scss用于常规样式，但对于调整大小编辑文件（如_768up.scss）的自定义样式，还要阅读style.scss文件中的信息以获得更多有关媒体查询的信息。 Bones附带了很棒的文档。

如何让一个句子的整个部分向下调整大小

2 个答案:

除了

进一步阅读