如何避免文字重叠

Question

我有一个显示文本的滑块。但文本需要在特定宽度上显示，

<div class="homepage-slider">
    <div id="sequence">
        <ul class="sequence-canvas">
            <li class="bg3">
                <!-- Slide Title -->
                    <div class="title"><? echo $top_text; ?></div>
            </li>
        <ul>
    </div>
</div>

css 我用的是（在媒体查询下用过）

#sequence .title 
    {
        text-align: left;
        margin-bottom: 7%;
        margin-left: -2%;
        font-family: roboto;
        font-size: 28px;
        min-width: 70%;
        overflow: scroll;
        padding:4%;
        position: relative;
    }

但是文本显示成这样

谁能告诉我如何避免这种文本重叠

Answer 1

使用 line-height 属性来管理行间距。

#sequence .title 
{
    text-align: left;
    margin-bottom: 7%;
    margin-left: -2%;
    font-family: roboto;
    font-size: 28px;
    min-width: 70%;
    overflow: scroll;
    padding:4%;
    position: relative;

}

您在此处显示的代码未指定 line-height 属性。所以我怀疑 line-height 属性是从它的父级继承到你的 .title 的，所以只需检查它是从哪里继承的并为它设置更高的值。

Answer 2

看起来像是行高问题。添加一个 "line-height: 1.3" 并查看是否有效。

Answer 3

在 html 中给出文本，以便我们找到确切的问题。

Answer 4

是的只需添加：

#sequence .title {
     line-height: 20px;
}

如何避免文字重叠

how to avoid overlapping of text

html

css

responsive-design