如何避免文本重疊

我有一個滑塊，我正在顯示文本。但文字需要顯示在特定的寬度，我用如何避免文本重疊

<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

如何避免文本重疊

回答

相關問題