Andere Schriftfarbe und dicke eines einzelnen Wortes innerhalb einer Zeile

[Choleriker]

Hallo zusammen,

ich habe folgendes Problem:

Ich möchte im Grunde genommen nur ein einzelnes Wort innerhalb der gleichen Zeile einfärben und fett gedruckt abbilden. Ich bekomme es zwar hin, aber die Formatierung ist danach zerstört. Der Text schmiegt sich dann nicht mehr am oberen Rand an und sitzt plötzlich mittig. Und es entstehen Zeilensprünge, die vorher nicht da waren. Das Ganze ist in JavaScript und CSS gehalten. Ich muss dazu sagen, dass ich auf dem Gebiet blutiger Anfänger bin. Ich denke, ich habe auch viele unnötige, doppelte Zeilen eingebaut, die man hätte vermeiden können.

Folgendes habe ich getan (Rahmen mit "span" gezogen und in h1 - child 1/2 unterteilt und eben in der .css Datei Einträge dafür eingefügt):

.js Datei:

<div id="user-info">
      <div><h1><span>{this.props.dataHandler["userData"]["firstname"]} {this.props.dataHandler["userData"]["lastname"]}</span><span> (Admin)</span></h1></div>
      <div><h2><span>Mitarbeiternummer: {this.props.dataHandler["userData"]["userID"]}</span></h2></div>
      <div><a href="/#"onClick={this.logout.bind(this)}><u>Logout</u></a></div>
      </div>

.css Datei:

  
#user-info {
    color: white;
    width: 15%;
    margin: 0.3vh 0 0 0;
  }

#user-info h1 :nth-child(1) {
    color: white; 
    font-size: 1.5vh;
    font-weight: normal;
    width: 15%;
    margin: 0 0 0 0; 
     
  }
    
#user-info h1 :nth-child(2) {
    color: red;
    font-size: 1.5vh;
    font-weight: normal;
    width: 15%;
    margin: 0.3vh 0 0 0; 
  }

#user-info h2 {
    color: white;
    font-size: 1.5vh;
    font-weight: normal;
    width: 15%;
    margin: 0.3vh 0 0 0; 
  }

#user-info div{
    font-size: 1.5vh;
  }

[mikdoe]

Moin!

Rahmen mit "span" gezogen

Ja würde ich auch.

in h1 - child 1/2 unterteilt

Wozu das?

Und wo ist denn der JS Code mit dem du das versucht hast?

[Choleriker]

Alles klar, danke für deine Antwort! Habe es nun hinbekommen .

[mikdoe]

Und wie sieht die Lösung aus?