Andere Schriftfarbe und dicke eines einzelnen Wortes innerhalb einer Zeile

C

Choleriker

Neues Mitglied
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:

JSX: 
<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:

CSS: 
#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;
}
 
Zuletzt bearbeitet von einem Moderator:
Hallo @Choleriker,

ich habe mir mal erlaubt, deinen Beitrag zur besseren Code-Darstellung zu bearbeiten.
Bitte nutze zukünftig die richtigen Code-Blöcke, damit auch das Syntax-Highlighting funktioniert und man den Quellcode gut lesen kann.

Nun zu deinem Anliegen:

Choleriker schrieb:
Das Ganze ist in JavaScript und CSS gehalten.
Zum Vergrößern anklicken....
Dein mit ".js Datei" beschrifteter Code sieht mir stark nach React und JSX aus, nicht? :D

Choleriker schrieb:
Ich möchte im Grunde genommen nur ein einzelnes Wort innerhalb der gleichen Zeile einfärben und fett gedruckt abbilden.
Zum Vergrößern anklicken....
Das kannst du recht leicht erreichen.
Wie du vermutlich schon richtig erkannt hast, brauchst du hierfür ein Inline-Element, das den Textfluss nicht verändert.
Wenn du z.B. Wörter in ihrer Wichtigkeit hervorheben willst, bietet sich das semantische <strong>-Element an.
Ansonsten kannst du aber auch einfach ein semantisch neutrales <span>-Element nutzen.

Wichtig zu wissen ist, dass du eigentlich nur das Element mit einem span umschließen musst, das tatsächlich auch farblich und von der Schrift her anders dargestellt werden soll.
Der restliche Text muss nicht auch noch umschlossen werden.

Für das Styling mit CSS ist es hilfreich, dem jeweiligen HTML-Element eine spezifische Klasse zu vergeben, sodass du keine komplexen Konstrukte wie #user-info h1 :nth-child(1) schaffen musst.

Hier ein einfaches Beispiel, wie ich mir das vorstelle:
HTML: 
<p>
    Ich bin ein ganz normaler Text. Und
    <span class="highlight">dieses Wort</span>
    sieht anders aus.
</p>
CSS: 
.highlight {
    color: red;
    font-weight: bold;
}

Auf diese Weise hast du nicht nur viel Code gespart, sondern kannst die gleichen Styles auch an anderer Stelle wiederverwenden, um Text wie gewünscht hervorzuheben.

Choleriker schrieb:
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.
Zum Vergrößern anklicken....
Hier wäre ein Screenshot o.ä. hilfreich, damit man nachvollziehen kann, was du genau meinst.

Noch ein paar kleinere Hinweise zum Schluss:
  • Deine ganzen Div-Container rund um h1, h2 und den Link sind im Grunde unnötig, da h1 und h2 Block-Elemente sind und standardmäßig eine ganze Zeile einnehmen.
  • Der Style width: 15%; wird auf die span-Elemente nicht angewendet, da diese Inline-Elemente sind und die Breite sich nur nach dem enthaltenen Text richtet. Den Display-Typ (block, inline, inline-block, etc.) kannst du im Zweifel per CSS anpassen.
  • Du musst Styles wie font-size: 1.5vh; font-weight: normal; nicht unbedingt für jeden Selektor / jedes Element wieder neu einfügen. Styles werden von darüberliegenden Eltern-Elementen vererbt bzw. von Elementen des gleichen Typs usw. übernommen.
 
Super, vielen lieben Dank für deine ausführliche Antwort und Erklärung! Du hast mir wirklich sehr weitergeholfen :). Alles hat direkt auf Anhieb so geklappt wie es sein sollte :D! Das war tatsächlich einfach nur zu sehr verschachtelt und zu kompliziert gedacht. Und mit den doppelt und dreifachen, redundanten Anweisungen, hab ich mir scheinbar einiges zerschossen, so dass ich ständig irgendwo Ungereimtheiten hatte.
 
Zurück
Oben Unten