jquery - 截断时调整文本大小

Question

我有一个包含 2 个并排包含文本的 div 的网页。我希望每个文本的大小都保持不变，直到屏幕宽度将文本切断，此时我希望包含 2 个文本的 div 的“宽度”为屏幕大小的 100%。这样我的网站在桌面上看起来是一样的，但在移动设备上查看时，如果屏幕宽度小到文本被截断的位置，文本将被缩放以占据屏幕宽度。

这是我当前的这部分 html:

<div id="fullname">
            <div class="firstname">First</div><div class="lastname">Second</div>
</div>

连同当前的 CSS:

.firstname
{
    display: inline;
    color: #FFFFFF;
    font-size: 65px;
    font-weight: 900;
    font-family: 'Lato', sans-serif;
    letter-spacing: -3px;
    width: .5em;
}

.lastname
{
    display: inline;
    color: #FFFFFF;
    font-size: 65px;
    font-weight: 100;
    font-family: 'Lato', sans-serif;
    letter-spacing: -3px;
}

#fullname
{
    max-width: 100%;
    margin: 50px 10px 0;
    white-space: nowrap;
}

Answer 1

尝试使用媒体查询是您的 CSS 来做到这一点。密码不在身边，请稍等...

编辑:将其放入您的 CSS 文件中:

.firstname
{
display: block;
color: #FFFFFF;
font-size: 65px;
font-weight: 900;
font-family: 'Lato', sans-serif;
letter-spacing: -3px;
width: .5em;
}

.lastname
{
display: block;
color: #FFFFFF;
font-size: 65px;
font-weight: 100;
font-family: 'Lato', sans-serif;
letter-spacing: -3px;
}

@media screen and (min-width:500px) {

.firstname
{
display: inline;
color: #FFFFFF;
font-size: 65px;
font-weight: 900;
font-family: 'Lato', sans-serif;
letter-spacing: -3px;
width: .5em;
}

.lastname
{
display: inline;
color: #FFFFFF;
font-size: 65px;
font-weight: 100;
font-family: 'Lato', sans-serif;
letter-spacing: -3px;
}

}

#fullname
{
max-width: 100%;
margin: 50px 10px 0;
white-space: nowrap;
}