Chevauchement de Texte en CSS - Comment puis-je le changer?

J'essaye de modifier un chevauchement élément (texte) dans mon fichier css. Une ligne de texte (dans un navigateur) s'affiche sur deux lignes de texte dans le mobile, se chevauchent ensemble.

Ce changement est pour la version mobile du site (le @media section paysage pour les tablettes)

Actuellement, l'en-tête (h2) texte se chevauchent sur un iPad/tablette.

Code de l'h2 @media section:

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

(Le .da-slide h2 est le composant qui soutient ce texte dans le code html)

J'ai essayé le line-height bien mais il ne fonctionne pas?

Toutes les idées...

Veuillez reproduire le problème sur jsfiddle. Vous obtiendrez plus rapide et de meilleures réponses.

OriginalL'auteur ThePlague | 2013-05-14

  1. 18

    Êtes-vous sûr que la hauteur de la ligne d'une propriété css a été de s'appliquer à votre classe?

    CSS 

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

    Sinon, avez-vous ajouté la balise meta dans l'en-tête?

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

    Aussi, pour un site web, assurez-vous que le texte n'est pas adapté:

    CSS

    body { -webkit-text-size-adjust: none; }
    J'ai eu le même problème, à l'aide de line-height résolu

    OriginalL'auteur Romain

  2. 4

    Cela devrait le faire en empêchant le texte de l'emballage, mais il va couper le bout de texte. c'est à dire de ne pas afficher n'importe quel texte plus long que la largeur.

    Il suffit de l'ajouter à la classe existante:

    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. */

    Personnellement, j'aime utiliser les points de suspension en effet pour les titres longs et les tablettes. Sélection ajuste le texte et ajoute trois points où le texte a été coupé.

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

    Exemple de l'effet ci-dessous:

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

    C'est extrêmement long et totalement inévitable titre de la page j'ai besoin de montrer

    En fonction de la largeur peuvent afficher:

    This is an extremely long...

    Espère que ça aide.

    Ouais, merci pour cette! De grandes choses!

    OriginalL'auteur STOP BIT