2013-04-30 2 views
8

Gibt es eine Lösung für Zeilenumbruch, wenn die Bildschirmauflösung klein ist anstatt <br>?Zeilenumbruch für Media-Abfrage?

weil br Bruchlinie die ganze Zeit :(

Hier mein Code <h2>I create unique, clean sites that are easy to navigate.<br>All my works comply with web</h2>

Ich denke, CSS3 Lösung dieses Problems haben

ist es eine Lösung für dieses <br> weil der Zeilenumbruch nur benötigt, wenn Seite auf Handy

Vielen Dank im Voraus für Ihre Hilfe

+3

I 'Alle meine Werke entsprechen web' :-) –

+2

wickeln den zweiten Satz in ein span-Element lieben, dann zuweisen ' display: Blockiere das Element in einer bestimmten Breite. Aber ich hätte gerne eine sauberere Lösung als diese oder eine
fcalderan

Antwort

15

Sie könnten dem BR-Tag einfach eine Klasse hinzufügen und sie so einstellen, dass sie angezeigt wird: Standardmäßig keine.

Dann in Ihrem mobilen Medien Abfrage setzt sie auf „Anzeige: static“

ich eher statisch vorgeschlagen haben als Block, weil ich glaube nicht, dass ein BR-Tag-Anzeige-Block ist standardmäßig so wahrscheinlich am besten, einfach geh mit statisch.

+1

http://jsbin.com/iyamum/2/edit Ok, es funktioniert und mit "Mobile First Approach" gibt es keine Notwendigkeit, das Display umzukehren - nur Denken Sie daran, ein Leerzeichen zwischen den Punkt und '
' ' – fcalderan

+1

' Display' hat keinen Eigenschaftswert namens 'statische', so dass es besser ist,' Block' zu verwenden. Als Referenz http://www.w3schools.com/jsref/prop_style_display.asp. Aber ich frage mich immer noch, was ist die Standard-Anzeige-Eigenschaft für '
' – Syed

+1

@Syed - ein paar Stücke auf Position statisch: http://alistapart.com/article/css-positioning-101 https://css-tricks.com/ was-wenn-dort-war-keine-Position-statisch/https://developer.mozilla.org/en/docs/Web/CSS/position –

2

Sie könnten einfach Floats verwenden, so dass Sie nie darüber nachdenken müssen, wo der Snapping-Punkt sein muss. Es wird entweder nebeneinander angezeigt oder springt sofort zur nächsten Zeile, wenn sie nicht passt.

span { 
    display: block; 
    float: left; 
    margin-right: 0.4em; 
} 

jsFiddle: http://jsfiddle.net/e4mWK/

+0

Dies ist eine schöne, clevere Lösung ! – dkamins

+0

In Ergänzung zu Christians Antwort können Sie auch den CSS-Leerraum verwenden: nowrap; Eigenschaft zum Umbrechen von Textabschnitten, die nicht unterbrochen werden sollen. Das ist ein Slogan, ein richtiger Name usw. – Yann

5

Wenn Bootstrap mit:

<br class="visible-xs"> 
+2

Ja, es ist eine der besten Antworten wenn Bootstrap in der Frage getaggt ist – Muhammed