如何避免文本重叠

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>

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

#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;
}