如何避免文本重叠

我有一个滑块，我正在显示文本。但文字需要显示在特定的宽度，我用如何避免文本重叠

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

但文字是越来越显示这样

enter image description here

有人可以告诉如何避免这种文本重叠

来源

2015-05-06 st001

你的代码是工作的罚款http://jsfiddle.net/dkhavbvf/ –

看起来像一个行高度太小。也许设置别的地方？ – Steve

你可以发布所有相关的代码，以便我们可以帮助你..现在我们不能知道你有div/li的行高。所以发布代码或创建演示 –

使用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属性的代码。所以我怀疑行高属性是从它的父级继承到你的.title，所以只需检查它从哪里继承，并为它设置较高的值。

来源

2015-05-06 06:12:28 Sachin

它看起来像一个行高问题。添加一个“行高：1.3”，看看是否有效。

来源

2015-05-06 06:15:19 namzo

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

来源

2015-05-06 06:18:44 Venu

烨只需添加：

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

来源

2015-05-06 11:39:47 Vinayak

虽然代码是赞赏，但它应该始终有一个相应的解释。这不需要很长时间，但它是预期的。 – peterh

如何避免文本重叠

回答

相关问题