Überlappender Text in der CSS - Wie kann ich das ändern?

Ich bin versucht zu ändern, eine überlappende element (text) in meine css-Datei. Eine Zeile von Texten (in einem normalen browser) erscheint als zwei Linien von text in mobilen, überlappt, zusammen.

Diese änderung ist für die mobile version der Website (die @media-Bereich für Landschaft Tabletten)

Derzeit der header (h2) text überlappt auf einem iPad/tablet.

Code aus dem h2 - @media Abschnitt:

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

(Die .da-slide h2 ist die Komponente, enthält dieser text in der html -)

Ich habe versucht, die line-height Eigenschaft, aber es hat nicht funktioniert?

Irgendwelche Ideen...

Bitte replizieren Sie die Ausgabe auf jsfiddle. Sie erhalten schnellere und bessere Antworten.

InformationsquelleAutor ThePlague | 2013-05-14

Sind Sie sicher, dass die line-height css-Eigenschaft wurde für Ihre Klasse?

CSS

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

Sonst, haben Sie Hinzugefügt, das meta-tag im header?

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

Außerdem für eine ansprechende Webseite, werden Sie sicher, dass der text nicht ist damit optimal:

CSS

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

Ich hatte ähnliches problem, mit line-height gelöst

InformationsquelleAutor Romain

5

Dies tun sollte es durch die Verhinderung der text umgebrochen wird, aber es wird abgeschnitten, der text end. also nicht Anzeige einer text länger als die Breite.

Fügen Sie es einfach zu den bestehenden Klassen:
```
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. */
```
Persönlich verwende ich gerne die Ellipsen-Effekt für lange Titel-und tablet-Geräte. Ellipse schneidet den text und fügt drei Punkte, wo der text wurde gekürzt.
```
text-overflow: ellipsis; /* if text is too long add three dots to the end to indicate text  continues */
```
Beispiel der Effekt unten:
```
This is an extremely long and completely unavoidable page title I need to show
```
Dies ist eine extrem lange und völlig unvermeidlich Titel der Seite, die ich brauche, um zu zeigen,

Je nach Breite wird möglicherweise angezeigt, wie:
```
This is an extremely long...
```
Hoffe, das hilft.
- Yeah, vielen Dank dafür!!!! Tolle Sachen!
InformationsquelleAutor STOP BIT

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.