Testo sovrapposto in CSS - Come posso cambiarlo?

Question

Sto provando a cambiare un elemento (testo) sovrapposto nel mio file css. Una riga di testo (in un normale browser) appare come due linee di testo in mobile, sovrapposte tra loro.

questo cambiamento è per la versione mobile del sito (la sezione @media per le tavolette di paesaggio)

Attualmente, l'intestazione (h2) il testo una sovrapposizione su un iPad/tablet.

codice dalla sezione h2 @media:

.da-slide h2{ 
    font-size: 36px; 
    width: 80%; 
    top: 40px; 
    padding: 18px 20px 18px 20px; 

(Il .da-slide h2 è il componente che contiene questo testo in html)

ho provato la proprietà line-height ma non ha funzionato?

Tutte le idee ...

Answer 1

Sei sicuro che la proprietà line-height css è stato applica alla vostra classe?

CSS

.da-slide h2{ 
     font-size: 36px; 
     line-height: 36px; 
     width: 80%; 
     top: 40px; 
     padding: 18px 20px 18px 20px; 
    } 

In caso contrario, ha aggiunto il meta tag nell'intestazione?

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Inoltre, per il sito web reattivo, assicurarsi che il testo non è ajusted:

CSS

body { -webkit-text-size-adjust: none; } 

Answer 2

Questo dovrebbe farlo impedendo il testo dalla confezione, ma taglierà il testo finale. Ad esempio, non visualizzerà alcun testo più lungo della larghezza.

Basta aggiungere alla classe esistente:

display: block; /* may help stop any text wrapping and display it inline. */ 
display: inline; /* same as above */ 
white-space: nowrap;/* ensure no wrapping */ 
overflow: hidden; /* if for some reason it escapes the visible area don't display anything. */ 

Personalmente mi piace usare l'effetto puntini di sospensione per lunghi titoli e dispositivi tablet. L'ellissi taglia il testo e aggiunge tre punti in cui il testo è stato ritagliato.

text-overflow: ellipsis; /* if text is too long add three dots to the end to indicate text continues */ 

Esempio di effetto di seguito:

This is an extremely long and completely unavoidable page title I need to show 

Questo è un titolo estremamente lunga e completamente inevitabile pagina ho bisogno di mostrare

A seconda larghezza potrebbe visualizzare come:

This is an extremely long... 

Spero che questo aiuti.