文本在响应时从背景溢出

Question

我有一个文本从它自己的背景溢出，当它达到这个大小时它保持这样：

我希望字体更小并且不会溢出，这样看起来不错，但我无法让它工作。我尝试设置固定宽度但没有用，我还写了一个“！重要”，但没有什么区别，但是当我对其他内容使用另一个 CSS 规则时，它在那之后起作用所以我猜代码正在运行。

样式表非常相关：

硕士 CSS

这是旁白的HTML：

<aside id="lateralBar" class="clearfix">
    <h3>
        Buscar
    </h3>
    <div id="search">
        <form action="#">
            <input type="text">
            <input type="button" value="L" class="icon">
        </form>
    </div>
    <h3>
        Login
    </h3>
    <div id="login" class="lateralBox">
        <form action="">
            <label id="user" class="icon">U</label>
            <input type="email">

            <label id="password" class="icon">w</label>
            <input type="password">

            <input type="submit" value="Entrar">
            <input type="reset" value="Limpiar">

            <a href="#">Registrate aquí</a>
            <a href="#">¿Has olvidado tu contraseña?</a>
        </form>
    </div>
    <h3>
        Redes sociales
    </h3>
    <div id="socialNetwork" class="lateralBox">
        <div class="twitter">
            <a href="#" class="icon">t</a>
            <p class="overlay">
                Twitter
            </p>
        </div>
        <div class="facebook">
            <a href="#" class="icon">f</a>
            <p class="overlay">
                Facebook
            </p>
        </div>
        <div class="youtube">
            <a href="#" class="icon">y</a>
            <p class="overlay">
                Youtube
            </p>
        </div>
    </div>
    <h3>
        Patrocinadores
    </h3>
    <div id="sponsors" class="lateralBox">

    </div>
</aside>

正常CSS:

#lateralBar {
    width: 300px;
    min-height: 1200px;
    font-family: "TrebuchetMS";
    float: right;
    margin: 20px;
    margin-right: 82px;
}

#lateralBar h3 {
    display: block;
    width: auto;
    height: 45px;
    line-height: 49px;
    background: url("../img/pxgray.png"), white;
    box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f, 2px 3px 0px #393d3f, 3px 4px 0px #393d3f;
    font-size: 30px;
    font-family: "BebasNeue";
    font-weight: normal;
    letter-spacing: 2px;
    padding-left: 15px;
    margin-top: 30px;
    margin-bottom: 15px;
}

#lateralBar h3:first-child {
    margin-top: 0px;
}

响应式CSS:

@media (max-width: 899){
    
    #lateralBar {
        margin-left: 100px;
    }

    #lateralBar h3 {
        font-size: 10px;
    }
}

Answer 1

问题出在您定义媒体的方式上。

尝试在您的 max-width 上添加 'px'，这应该有效：

@media (max-width: 899px){ .. }

文本在响应时从背景溢出

Text overflows from its background while responsive

css

frontend

responsive-design