Korrekter Zeilenumbruch in einem span-Tag

Ich habe ein Formular mit einer Inline-Überprüfungsmeldung in einem Bereich.Korrekter Zeilenumbruch in einem span-Tag

<span id="EndTimeErrors"> 
    <label for="EndTime" class="field-validation-error"> 
     Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34 
    </label> 
</span>

Ugly wrap with span

Leider ist das Wort Wrap wirklich hässlich. Ich könnte die Validierungsnachricht in ein Div setzen, um die Nachricht zu verschönern. Das Ergebnis ist besser, aber nicht perfekt.

<div id="EndTimeErrors"> 
    <label for="EndTime" class="field-validation-error"> 
     Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34 
    </label> 
</div>

Using a div

Was ich wirklich will, ist so etwas wie dieses:

Mockup of goal

Welche CSS-Code würden Sie das gewünschte Ergebnis zu erreichen?

Quelle

2010-02-10 Sandra

Versuchen

white-space: nowrap;

Quelle

2010-02-10 15:03:24 wawooca

Danke! Das gab mir das gleiche Ergebnis, als würde ich statt der Spanne ein div verwenden. Es sieht besser aus als die Spannweite, aber nicht perfekt. – Sandra

Die bisher eleganteste Lösung. – Chris

Hervorragend geeignet für die Entfernung von Inhalten vom Bildschirmrand! Vergessen Sie nicht, 'display: block' zu verwenden – JackalopeZero

Der wahrscheinlichste Grund, warum ich zu verursachen, den Unterschied zwischen Ihren <div> und <span> Tags denken kann, ist, dass ein <div> Element eines Blockelement betrachtet wird, während ein <span> Element Inline betrachtet wird.

Haben Sie eine Art Wickelelement für die gefloateten Elemente, etwas, das so aussieht?

<div class="row"> 
    <div style="float: left;"> 
     <span>Endzeit:</span> 
    </div> 
    <div style="float: left;"> 
     <input type="text" /> <span>10.2.2010</span> 
    </div> 
    <div id="EndTimeErrors"> 
     <label for="EndTime" class="field-validation-error"> 
       Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34 
     </label> 
    </div> 
</div>

Wenn nicht, versuchen Sie es und ich denke, es könnte funktionieren.

Quelle

2010-02-10 15:08:18 vrutberg

Mit mehreren divs und float sie würde funktionieren, aber ich möchte zu viele Div-Boxen zu vermeiden. Ich hatte gehofft, dass es einen CSS-Stil geben würde, der es mir ermöglichen würde, eine Spanne zu verwenden. Der Text sollte an der gleichen Stelle beginnen, an der die Spanne in der ersten Zeile beginnt und nicht erst am Anfang der zweiten Zeile. – Sandra

Manchmal alles, was Sie brauchen, ist ein <br/>

Bitte geben Sie eine gültige Uhrzeit ein, <br/>zum Beispiel 8:00 oder 14:34

Quelle

2010-02-10 15:36:33 graphicdivine

Ich habe einen Br hinzugefügt und in Firefox 3.57 ist der Anfang der beiden Zeilen immer noch nicht ausgerichtet. Die
steuert, wo die Zeile bricht, aber leider steuert nicht, wo die neue Zeile beginnt. – Sandra

Ich verstehe. Posibly, setzen Sie display: inline-block auf das enthaltende Label. – graphicdivine

Hier ist der Code, den ich am Ende mit:

<span id="EndTimeErrors" style="position: absolute; left: 300px;"> 
    <label for="EndTime" class="field-validation-error"> 
     Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34 
    </label> 
</span>

I positioniert, um die Spannweite absolut und bewegt es 300px nach links.

Dies funktioniert, aber ich bin nicht vollständig mit dieser Lösung zufrieden, weil die 300px fest codiert sind. Wenn sich die Länge der Dinge vor der Validierungsnachricht ändern würde, müsste ich auch die 300px ändern.

Quelle

2010-02-10 16:01:35 Sandra

Korrekter Zeilenumbruch in einem span-Tag

Antwort

Verwandte Themen