Anzeige unterhalb spezifischen SPAN

Question

ich folgenden Code haben:

<div> 
    <span class="red">TEXT 1</span> 
    <span class="blue">TEXT 2</span> 
    <span class="yellow">TEXT 3</span> 
</div> 

Mein Ergebnis ist nur reine Linie

TEXT1 TEXT2 TEXT3 

Ich mag würde einen Text genau hinzufügen unter 2-nd Spanne (TEXT2) ohne Änderungen am folgenden Element

So Endergebnis muss so ähnlich

TEXT1 TEXT2 TEXT3 
     HELLO WORLD APP 

sein Wie soll ich das tun?

Ich habe versucht, Display: Block für TEXT 2, aber es hat nicht wirklich funktioniert, wie ich erwartet hatte.

Danke!

Answer 1

Absolute Positionierung wäre eine Option sein:

.blue { position: relative; } 
 
.blue span { position: absolute; top: 1em; left: 0; white-space: pre; }

<div> 
 
    <span class="red">TEXT 1</span> 
 
    <span class="blue">TEXT 2 <span>HELLO WORLD APP</span></span> 
 
    <span class="yellow">TEXT 3</span> 
 
</div>

ist jedoch zu beachten, dass, wenn die mittlere Spanne (TEXT 2) ist zu nahe an der rechten Ecke des Ansichtsfensters, wird der Inhalt in der innere Spannweite könnte abgeschnitten werden. Hängt vom spezifischen Szenario ab, ob das ein Dealbreaker ist oder nicht.

Answer 2

Gefällt mir das?

.red { 
 
    background-color: red; 
 
} 
 

 
.blue { 
 
    background-color: blue; 
 
    position: relative; 
 
} 
 

 
.yellow { 
 
    background-color: yellow; 
 
} 
 

 
.hello { 
 
    position: absolute; 
 
    background-color: green; 
 
    bottom: 0; 
 
    left: 0; 
 
    transform: translateY(100%); 
 
    min-width: 200px; 
 
}

<div> 
 
    <span class="red">TEXT 1</span> 
 
    <span class="blue"> 
 
    TEXT 2 
 
    <span class="hello">HELLO WORLD APP</span> 
 
    </span> 
 
    <span class="yellow">TEXT 3</span> 
 
</div>

Answer 3

Hier ist eine weitere Lösung reines CSS und einen Titel als Spanne Attribut hinzufügen.

Definiert ::before Pseudoelement, absolut positioniert und mit einem Datenattributwert.

.blue::before{ 
 
    content: attr(data-text); 
 
    position: absolute; 
 
    margin-top: 1em; 
 
}

<div> 
 
    <span class="red">TEXT 1</span> 
 
    <span class="blue" data-text="HELLO WORLD APP">TEXT 2</span> 
 
    <span class="yellow">TEXT 3</span> 
 
</div>