Force Text in zwei Zeilen von css

-2

anzuzeigen Ich habe ein CSS-Problem, das sehr einfach scheint. Ich habe einen Text, wie Sie unten sehen können: "Große Ideen. Dauerhafter Wert."Force Text in zwei Zeilen von css

Wenn ich auf mobilen Geräten bin ich brauche auf zwei Zeilen diesen Text angezeigt werden soll. Ich habe viele Möglichkeiten ausprobiert, aber keiner von ihnen hat für mich funktioniert.

Dies ist der HTML-Code:

<div class="home_firstrow" id="panel-one"> 
    <div> 
     <h3> Big Ideas. Lasting Value.</h3> 
     <div class="container"> 
     </div> 
    </div> 
</div>

ich versucht habe, für das h3-Element das setzen: habe

white-space: normal

ich die

heigth

zu setzen versucht und

min-heigth

aber nichts davon funktionierte für mich. Hast du eine Idee, was ich ausprobieren kann? Das Problem ist, ich muss dies von CSS lösen. Ich brauche den Text in zwei Zeilen nur in der mobilen Ansicht. Danke!

Quelle

2017-09-20 Orsi

Vielleicht ist das Problem 'Höhe' und' min-Höhe'? – Script47

Können Sie die Eigenschaft 'width' anstelle von' height' wählen? – sol

Fügen Sie einen tatsächlichen Zeilenumbruch in den Inhalt ein (ich bevorzuge ' ', um deutlich zu machen, dass dies ein beabsichtigter Zeilenumbruch ist), und verwenden Sie 'white-space: pre' (oder' pre-line', abhängig von ob Sie es brauchen, um auch an anderen Stellen zu wickeln, wenn es nicht genug Platz gibt.) – CBroe

beliebten CSS-Framework ist besser für Ihre Website! Doch Sie, wie dies in CSS .Control von @media (max-width:..)

h3 { 
 
    width:100%; 
 
    } 
 
    h3 span { 
 
    float:left; 
 
    width:50%; 
 
    } 
 
    /*in mobile view ,give full width each span */ 
 
    @media (max-width: 500px) { 
 
    h3 span { 
 
     width:100%; 
 
     background:red; 
 
    } 
 
    }

<h3><span>Big Ideas.</span><span>Lasting Value.</span></h3>

Quelle

2017-09-20 08:11:10

Sie haben Fehler in schriftlicher Form heigth Rechtschreibung

seine height nicht heigth

so schreiben height statt heigth

Quelle

2017-09-20 08:03:37 Bhargav

Ich denke, das ist nur ein Tippfehler, wenn das OP hier posten .. –

die Sie interessieren ..

nur Medien-Abfrage verwenden, wenn diese verwendet wird. Weil es eine feste width hat;

h3{ 
 
    width:120px; 
 
}

<div class="home_firstrow" id="panel-one"> 
 
    <div> 
 
     <h3> Big Ideas. Lasting Value.</h3> 
 
     <div class="container"> 
 
     </div> 
 
    </div> 
 
</div>

Quelle

2017-09-20 08:09:48

versuchen können, können Sie @media screen and (orientation:portrait) { … } verwenden.

Quelle

2017-09-20 08:20:08 Tiki

Force Text in zwei Zeilen von css

Antwort

Verwandte Themen