Linktext mit Umbruch

[ottogal]

Hallo in die Runde,

wenn ein Linktext mit Leerzeichen in einem a-Element wegen zu geringer Breite umbricht, wird ein diesem zugeordnetes padding-left nur auf die erste Zeile angewendet - siehe https://jsfiddle.net/6Lkv63L5/2/ Was ist der einfachste Weg, um auch die Folgezeilen in den Genuss des paddings kommen zu lassen?

[Der Martin]

Hi,

wenn ein Linktext mit Leerzeichen in einem a-Element wegen zu geringer Breite umbricht, wird ein diesem zugeordnetes padding-left nur auf die erste Zeile angewendet

ja, das ist die generelle Wirkung von padding bei inline-Elementen.

Was ist der einfachste Weg, um auch die Folgezeilen in den Genuss des paddings kommen zu lassen?

Der einfachste? Vermutlich, den Abstand über das Elternelement zu regeln. In bestimmten Fällen könnte man auch den Link als display:inline-block formatieren.

So long,
 Martin

[Matthias Apsel]

Hallo ottogal,

wenn ein Linktext mit Leerzeichen in einem a-Element wegen zu geringer Breite umbricht, wird ein diesem zugeordnetes padding-left nur auf die erste Zeile angewendet - siehe https://jsfiddle.net/6Lkv63L5/2/ Was ist der einfachste Weg, um auch die Folgezeilen in den Genuss des paddings kommen zu lassen?

display: inline-block oder inline-flex Nebenwirkungen nicht ausgeschlossen.

Bis demnächst
Matthias

[ottogal]

Die Situation ist noch etwas komplizierter: In dem div steht auch noch ein img mit float:right. (In Wahrheit ist es ein li-Element in einem Menü, das Bild ist ein Abwärts-Pfeil der zu erkennen gibt, dass es ein aufzuklappendes Untermenü gibt.) Und display:inline-block hat hier in der Tat einen unschönen Nebeneffekt: der Block rutscht unter das img - siehe https://jsfiddle.net/6Lkv63L5/4/

Übrigens: Dem Elternelement li ein margin-left zu verpassen (statt dem a ein padding-left) geht nicht, weil das li ein Hintergrundbild hat.

[MrMurphy1]

Hallo

Dem Elternelement li ein margin-left zu verpassen (statt dem a ein padding-left) geht nicht, weil das li ein Hintergrundbild hat.

Noch weitere Überraschungen und Geheimnisse? Wir können dir nur Lösungen zu den Quellcodeschnipseln geben die du uns mitteilst.

Zu dem Quelltext

   <div>
      <img src="" />
      <a href="#">Linktext mit Umbruch</a>
   </div>

würde ich statt folgendem CSS

      div {
         width: 10rem;
         background-color: #bda;
      }
      img {
         float: right;
      }
      a {
         padding-left: 2rem;
         display: inline-block;
      }

das folgende CSS mit Flexbox verwenden:

      div {
         background-color: #bda;
         width: 10rem;
         display: flex;
         flex-direction: row-reverse;
         align-items: flex-start;
      }
      a {
         padding-left: 2rem;
      }

Gruss

MrMurphy

[ottogal]

Noch weitere Überraschungen und Geheimnisse? Wir können dir nur Lösungen zu den Quellcodeschnipseln geben die du uns mitteilst.

Sorry, klar - ich dachte, ich sollte es so weit wie möglich vereinfachen...

das folgende CSS mit Flexbox verwenden:

      div {
         background-color: #bda;
         width: 10rem;
         display: flex;
         flex-direction: row-reverse;
         align-items: flex-start;
      }
      a {
         padding-left: 2rem;
      }

Vielen Dank! - Das leistet das Gewünschte: https://jsfiddle.net/6Lkv63L5/5/

[MrMurphy1]

Hallo

Schön. Nur das

img {
  float: right;
}

solltest du auch weglassen. Das ist schlicht überflüssig und gehört deshalb nicht zu meiner Lösung.

Gruss

MrMurphy

[ottogal]

Klar, dafür ist ja jetzt flex-direction: row-reverse da. Danke nochmal.

ottogal

Edit: Wollte den Link in meinem vorigen Post korrigieren, aber da gibts kein "Beitrag bearbeiten" mehr. Deshalb hier: https://jsfiddle.net/6Lkv63L5/9/

[Christian Kruse]

Hallo ottogal,

Edit: Wollte den Link in meinem vorigen Post korrigieren, aber da gibts kein "Beitrag bearbeiten" mehr.

Editieren geht nur innerhalb der ersten 15 Minuten und solange es keine Antwort gibt.

LG,
CK

[ottogal]

Editieren geht nur innerhalb der ersten 15 Minuten und solange es keine Antwort gibt.

Ah, okay, wusste ich nicht.

[ottogal]

Klar, dafür ist ja jetzt flex-direction: row-reverse da.

Nun, ganz löst das mein Problem nicht: Das Bild klebt jetzt zwar ganz rechts, aber der Link sitzt unmittelbar links daneben und nicht linksbündig mit dem padding 2rem. Habe es mit align-content:space-between versucht, das bewirkt jedoch gar nichts...

[MrMurphy1]

Hallo

Hast du margin-right oder padding-right für das a-Element ausprobiert?

Gruss

MrMurphy

[ottogal]

Hi MrMurphy,

das Problem ist nicht, einen festen Abstand zwischen a-Element und Bild zu bekommen. Vielmehr soll das a-Element unabhängig von seiner Länge den besagten padding-left haben und gleichzeitig muss das Bild einen festen Abstand vom rechten Rand des li-Elemnts haben. Der Zwischenraum zwischen beiden variiert je nach Länge des Linktextes:

[MrMurphy1]

Hallo

Das li-Element ist mir im Zusammenhang mit deinem Problem neu und kam in deinen Beispielen noch nicht vor.

Wie soll ich das ohne den Quelltext bitte berücksichtigen?

Gruss

MrMurphy

[ottogal]

Dass es eigentlich ein li statt ein div ist, habe ich schon in meinem zweiten Post hier erwähnt. Und klär mich auf, wenn ich irrtümlich meine, dass es für meine Frage keinen Unterschied macht.

[ottogal]

Habe es mit align-content:space-between versucht, das bewirkt jedoch gar nichts...

Das musste natürlich justify-content:space-between heißen...

So klappts jetzt: https://jsfiddle.net/6Lkv63L5/10/