Computed Line-Height bei umgebrochenen Zeilen

J

jemand anders

Erfahrenes Mitglied
Hallo,

ich möchte eine Information ans eine Ende von Listenelementen anhängen (float:right;content:"x").
Werden die Zeilen jedoch umgebrochen, erscheint die Information jedoch nicht in der obersten Zeile, was logisch sein mag, mir aber optisch nicht gefällt.
Mit einer Ergänzung von position:relative und top:$WERT könnte das Problem umgangen werden.
Allerdings finde ich keine CSS-Lösung, und mit Javascript wird von ComputedStyle immer die Default-Line-Höhe ermittelt, statt der tatsächlichen Höhe.
Im Firefox wird in den Dev-Tools -> Inspector -> Layout jedoch der richtige Wert angezeigt.
Vielleicht hat jemand eine Idee, was ich tun kann, falls es keine Programmmacke ist.

HTML: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- check-comp-line-height.html -->
    <title>Line Height Computed Value</title>
    <style>
      body {
        max-width: 500px;
      }
      li {
        border: 1px solid #ccc;
        line-height: 1.6em;
        margin: 5px;
        padding: 5px;
        list-style-type: none;
      }
      li:first-child {
        overflow: visible;
        width: 2000px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae
        consequatur, quae aspernatur cum nesciunt adipisci mollitia inventore!
        In neque quam tenetur ad optio ratione explicabo quidem. Esse asperiores
        accusantium iste!
      </li>
      <li>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae
        consequatur, quae aspernatur cum nesciunt adipisci mollitia inventore!
        In neque quam tenetur ad optio ratione explicabo quidem. Esse asperiores
        accusantium iste!
      </li>
    </ul>
    <script>
      (() => {
        const li = document.querySelectorAll("li");
        li.forEach((l, idx) => {
          let compValue =
            "<br/><strong>Computed Value Line Height: " +
            window.getComputedStyle(l).getPropertyValue("line-height") +
            "</strong>";
          document.querySelector(`li:nth-child(${idx + 1})`).innerHTML +=
            compValue;
        });
      })();
    </script>
  </body>
</html>
 
lineHeight ist wörtlich zu verstehen, es gibt die Zeilenhöhe an, nicht die Höhe des gesamten Textblocks. Du kannst diese jedoch mit getBoundingClientRect ermitteln:
Element: getBoundingClientRect() method - Web APIs | MDN

Wenn ich dein Vorhaben richtig verstehe, ist das jedoch gar nicht nötig: Du kannst mit Flexlayout und "align-items: start;" problemlos das neue Element oben neben der ersten Zeile anordnen, ganz ohne Rechnerei, float und absolute Positionierung:
Code: 
        li {
            display: flex;
            align-items: start;
        }

        li strong {
            padding: 0 0.5em;
            white-space: nowrap;
        }
Code: 
        (() => {
            const li = document.querySelectorAll("li");
            li.forEach((l, idx) => {
                const
                    addedContent = '<strong>Lorem ipsum</strong>';
                l.insertAdjacentHTML('beforeend', addedContent);
            });
        })();
 
Genau das macht der Code, den ich vorgeschlagen habe. Wenn es statisch und immer das gleiche Symbol ist, kannst Du es aber auch mit ::after hinzu fügen:
Code: 
        li {
            display: flex;
            align-items: start;
        }

        li::after {
            content: 'X';
        }
 
Bei mir nicht :-(

HTML: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- check-comp-line-height.html -->

    <title>Line Height Computed Value</title>

    <style>
      body {
        max-width: 800px;
      }
      li {
        border: 1px solid #ccc;
        line-height: 1.6em;
        margin: 5px;
        padding: 5px;
        list-style-type: none;
        display: flex;
        align-items: start;
      }
      li::after {
        content: "X";
        /*float:right;
           right: 0;*/
      }
    </style>
  </head>

  <body>
    <ul>
      <li>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae
        consequatur, quae aspernatur cum nesciunt...
      </li>
      <li>Lorem, ipsum!</li>
      <li>
        Lorem, ipsum adipisicing elit. Molestiae consequatur, quae aspernatur
        cum nesciunt...
      </li>
      <li>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae
        consequatur, quae aspernatur cum nesciunt adipisci mollitia inventore!
        In neque quam tenetur ad optio ratione explicabo quidem. Esse asperiores
        accusantium iste!
      </li>
    </ul>

    <script>
      (() => {
        const li = document.querySelectorAll("li");
        li.forEach((l, idx) => {
          console.log(l.getBoundingClientRect());
          /*
          let compValue =
            "<br/><strong>Computed Value Line Height: " +
            window.getComputedStyle(l,null).lineHeight; //getPropertyValue("line-height") +
            "</strong>";
          document.querySelector(`li:nth-child(${idx + 1})`).innerHTML +=
            compValue;
          */
        });
      })();
    </script>
  </body>
</html>
 
Ach so, ist der Text kurz, muss man es rechts anordnen. Auch kein Problem mit "justify-content: space-between;":
Code: 
li {
  border: 1px solid #ccc;
  line-height: 1.6em;
  margin: 5px;
  padding: 5px;
  list-style-type: none;
  display: flex;
  align-items: start;
  justify-content: space-between;
}
 
Ich hätte nicht gedacht, dass es eine Rolle spielt, aber im Testfile hatte ich das OL-Tag durch das UL-Tag ersetzt, im Original ist die Liste aber sortiert, und mit display:flex erscheint keine Numerierung.

Nachfolgend also noch mal der File mit dem korrekten Aufbau.

<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- check-comp-line-height.html -->
<title>Line Height Computed Value</title>
<style>
body {
max-width: 800px;
}
li {
border: 1px solid #ccc;
line-height: 1.6em;
margin: 5px;
padding: 5px;
/*list-style-type: none;*/
display: flex;
align-items: start;
justify-content: space-between;
}
li::after {
content: "X";
/*right: 0;*/
}
</style>
</head>
<body>
<ol>
<li>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae
consequatur, quae aspernatur cum nesciunt...
</li>
<li>Lorem, ipsum!</li>
<li>
Lorem, ipsum adipisicing elit. Molestiae consequatur, quae aspernatur
cum nesciunt...
</li>
<li>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae
consequatur, quae aspernatur cum nesciunt adipisci mollitia inventore!
In neque quam tenetur ad optio ratione explicabo quidem. Esse asperiores
accusantium iste!
</li>
</ol>
<script>
(() => {
const li = document.querySelectorAll("li");
li.forEach((l, idx) => {
console.log(l.getBoundingClientRect());
/*
let compValue =
"<br/><strong>Computed Value Line Height: " +
window.getComputedStyle(l,null).lineHeight; //getPropertyValue("line-height") +
"</strong>";
document.querySelector(`li:nth-child(${idx + 1})`).innerHTML +=
compValue;
*/
});
})();
</script>
</body>
</html>
 
Die Ursache ist jetzt nicht, dass Du das <ul> nach <ol> geändert hast. Wenn man den Default-Wert "list-item" von display ändert, verschwinden die Markers. Die Lösung ist etwas, was ich sonst nicht empfehle: Ein Container drum herum, dann kann das display für die <li> bleiben wie es ist und die Markers bleiben erhalten:
Code: 
    <ol>
        <li>
            <span>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae
                consequatur, quae aspernatur cum nesciunt...
            </span>
        </li>
        <li><span>Lorem, ipsum!</span></li>
usw.
Code: 
        li {
            border: 1px solid #ccc;
            line-height: 1.6em;
            margin: 5px;
            padding: 5px;
        }

        li>span {
            display: flex;
            align-items: start;
            justify-content: space-between;
        }

        li>span::after {
            content: "X";
        }
 
Trifft sich gut, da die Listenelement ohnehin A-Tags enthalten. Nun klappt es.

Ich hatte gestern nach deinem ersten Ansatz noch einmal nach einem Flexbox-Tutorial gesucht und bin auf das hier gestoßen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück