Zeilenumbruch auf dem Handy nur

Ich habe eine Telefonnummer auf einer Webseite. Es sieht gut aus auf einem laptop, aber auf einem mobilen Gerät die Hälfte der Zahl springt in die nächste Zeile. Es sieht nicht gut aus.

Also, wie kann ich einen Zeilenumbruch funktioniert das nur auf einem mobilen Gerät Größe Bildschirm?

Ich bin nicht sehr erfahren in der Programmierung, also bitte genau 🙂 vielen Dank für jede Hilfe!!!

Du fragst uns, um genau zu sein, doch Sie sind nicht spezifisch an allen. Welche Technologien verwenden Sie? Was mobile testen Sie mit? Was hast du versucht, wo ist dein code?

InformationsquelleAutor Henrik | 2016-06-15

Warum nicht einfach einen Zeilenumbruch als Klasse in der
tag?

<br class="mobile-break">

- und CSS -

    @media screen and (min-width: 600px)  {
        .mobile-break { display: none; }
    }

InformationsquelleAutor Richard

5

Kann man sich in der CSS - word-break Eigenschaft zu verhindern, dass Wörter/Zeichenfolgen, die in zwei Hälften geschnitten. Wenn es speziell Zeilenumbrüche, die Sie verwenden möchten, dann anfügen einer Klasse für das element wie   und Einstellung display: none im CSS sollte verhindern, dass es etwas zu tun normalerweise.
Sie können dann eine Medien-Abfrage, um den Zeilenumbruch an bestimmten Handy-Bildschirm Größen, zum Beispiel:
```
.br-on-mobile {
 display: none;
}

@media screen and (<Your conditions here>) {
 .br-on-mobile {
 display: static;
 }
}
```
EDIT: static ist ungültig Wert für die Anzeige. Mit Erben sollte das Problem beheben. Sehen diese Geige

EDIT: Der header der Seite muss auch <meta name="viewport" content="width=device-width, initial-scale=1"> zu ermöglichen, für die richtige Skalierung/Anwendung von media queries.

Könnten Sie auch erreichen dies, indem er die Zahl in ein span-element und die Einstellung dieses display: block wenn auf mobilen Geräten, obwohl das Problem mit den media queries unten gelten auch für diese.
- Vielen Dank für die Antwort. Aber ich kann nicht wirklich machen es zu arbeiten. Ich benutze diesen code: <stark>Gratis Rådgivning Før, unter, efter parforholdet Ring på <a href="tel:70116263"> 70 11 62 63</a> + CSS: max-width: 400px ich möchte, um die ganze Telefonnummer zu springen auf die nächste Zeile auf dem Handy. Aber es funktioniert nicht? Was mache ich hier falsch? http://www.mandecentret.dk
- Hmm...es funktioniert nicht aus irgendeinem Grund hier?
- In der Geige? Das ist merkwürdig, wenn ich den code ausführen und ändern Sie die Größe der rechten unteren Quadrat auf weniger als 400px Breite der Reihe, springt in eine neue Zeile, wie erwartet. Sind Sie auf der Größe der Geige windows?
- Ja das fiddle funktioniert wie es sollte. Aber nicht, wenn ich kopiere die codes in die website.
- Haben Sie die media-query entsprechen die Abmessungen Ihres mobilen Gerätes? Derzeit ist der Bildschirm >400px breit ist, dann ist es nicht der Stil angewendet werden.
- Auch, welchen browser/welches Gerät verwenden Sie?
- Ich schrieb 400px, sollte das nicht funktionieren? Sollte der Zeilenumbruch auf allen mobilen screens. Ich benutze verschiedene Browser und Chrome und Huawei-Browser auf meinem Handy. Und ich habe gerade überprüft auf meinem webbrowser und zu meiner überraschung sehe ich, dass Firefox gehen Sie der Zeilenumbruch gut, aber Chrome und Safari nicht.
- Ich habe gerade realisiert, müssen Sie den folgenden meta-tag in den header ein: <meta name="viewport" content="width=device-width, initial-scale=1"> Dies eine Skalierung von Inhalten auf Ihr Gerät ordnungsgemäß.
- Sorry, wechselte ich FF und Chrome. Chrome macht es richtig. Ich sollte hinzufügen, dass auf meinem Handy im 2-Browser, der text ist nicht zentriert ausgerichtet. Es ist nur, wenn ich die Größe meines webbrowser-chrome-Fenster so klein wie möglich, sehe ich es so wie es sein sollte.
- Danke, ich habe gerade versucht, fügen Sie diese in der Kopfzeile: <meta name="viewport" content="width=device-width, initial-scale=1">, aber keine änderung 🙁
- In dem Fall bin ich überfragt. Es funktioniert in Chrome und FF für mich, alles, was ich vorschlagen kann, ist, dass Sie erhöhen 400px um etwas viel größeres als test just in case Ihrem mobilen browser-Breite >400px.
- Sind deine media queries anwenden, richtig? Wenn Sie die Größe des Bildschirms <400px breit sind die neuen Stile erscheinen, in welcher web-dev-tools/Informationen, die Sie verwenden?
- Ja, ich kann sehen, wie Sie mit Firebug. Ich weiß nicht, warum es nicht funktioniert, aber vielen Dank für deine Hilfe trotzdem.
- Diese Lösung funktionierte perfekt für mich. Danke, Sam!
InformationsquelleAutor Sam Anderson

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.