✔ text-overflow: ellipsis (align-items: center) ???

k3nguruh

k3nguruh

Erfahrenes Mitglied
Hallo,

ich möchte in einem Element, dass der Text in der Höhe zentriert ist und der Text darin "abgeschnitten" wird. Ich habe mal ein Beispiel unter codepen.io gestellt. Speziell geht es dabei um das "item-label".

text-overflow.PNG
1. nicht zentriert, aber abgeschnitten
2. zentriert, aber nicht abgeschnitten
3. zentriert und abgeschnitten, aber abhängig von der line-height
4. zentriert und abgeschnitten, aber abhängig vom padding

Wird jetzt bei dem "list-item" die eingestellte Höhe von derzeit 28px geändert, müssen bei Punkt 3 und 4 die Pixel angepasst werden damit es wieder Zentriert ist. Theoretisch dachte ich mir, dass es mit Flexbox einfach ist, aber dann wird der Text nicht mehr gekürzt.
Die Angabe einer Höhe bei dem "list-item" ist für mich aber wichtig.

Ich würde mich freuen, wenn ihr euch das mal anschaut.
 
Zuletzt bearbeitet:
Es hat mich überrascht aber es trifft zu: Hat ein Element ein display:flex; wird das
text-overflow: ellipsis; ausgehebelt.
Ich nehme mal an, Du hast die vertikale Ausrichtung mit "line-height" und "padding" versucht, um das Problem zu lösen? Ohne das funktioniert es nämlich, wenn ich den Rahmen dem äußeren div.list-item gebe und die span.item-label ohne Rahmen und ohne Zentrierung lasse und das span.item-label mit Flex durch das div.list-item zentriere:
Code: 
<!DOCTYPE HTML>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <title>Test Vertical Align</title>

    <style>
        *,
        ::before,
        ::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            padding: 100px;
        }

        .selection {
            display: flex;
            min-height: 2.375rem;
            border: 1px solid black;
            overflow: hidden;
        }

        .selection-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem 0.75rem;
            padding: 0.25rem 0.75rem;
            overflow: hidden;
        }

        .list-item {
            display: flex;
            height: 50px;
            overflow: hidden;
            border: 1px solid blue;
        }

        .list-item.align-start {
            align-items: start;
        }

        .list-item.align-center {
            align-items: center;
        }

        .item-label {
            padding-inline: 0.25rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="selection">
        <div class="selection-list">
            <div class="list-item align-start">
                <span class="item-label">1. Standard: (Lorem ipsum dolor sit amet)</span>
            </div>
            <div class="list-item align-center">
                <span class="item-label">2. Flex-Center: (Lorem ipsum dolor sit amet)</span>
            </div>
            <!-- <div class="list-item">
                <span class="item-label item-label-height">3. Line-Height: (Lorem ipsum dolor sit amet)</span>
            </div>
            <div class="list-item">
                <span class="item-label item-label-padding">4. Padding-Block: (Lorem ipsum dolor sit amet)</span>
            </div> -->
        </div>
    </div>
</body>

</html>
Hoffe, das ist so für dich anwendbar.
 
Hallo,

Danke für deine Antwort. Leider bringt mich das nicht weiter. Der Border muss bei dem "item-label" bleiben, da mit dem Border etwas passiert. Ich hatte den Code vll. etwas zu kurz gehalten.

Ich habe den Code nochmal etwas erweitert, um den Sinn weiter zu verstehen. Fährt man mit der Maus über dem X, wird die Rahmenfarbe geändert.

Hier nochmal der Link: codepen.io

P.S.: Das Fontawesome Icon wird eigentlich per ::after angezeigt. Ist jetzt nur zur Veranschaulichung.
 
Verstehe, da hat man das Problem, dass man mit CSS nicht aufwärts gehen kann.
Generell ist es weniger zu empfehlen, ein Problem mit einem zusätzlichen Container zu lösen, aber in diesem speziellen Fall führt es zum Ziel:

HTML: 
    <div class="selection">
        <div class="selection-list">
            <div class="list-item-wrapper">
                <span class="item-button">X</span>
                <div class="list-item align-start">
                    <span class="item-label">1. Oben ausgerichtet</span>
                </div>
            </div>
            <div class="list-item-wrapper">
                <span class="item-button">X</span>
                <div class="list-item align-center">
                    <span class="item-label">2. Vertikal zentriert</span>
                </div>
            </div>
        </div>
    </div>
CSS: 
        .selection {
            display: flex;
            min-height: 2.375rem;
            border: 1px solid black;
            overflow: hidden;
        }

        .selection-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem 0.75rem;
            padding: 0.25rem 0.75rem;
            overflow: hidden;
        }

        .list-item-wrapper {
            display: flex;
            align-items: center;
            min-width: 1px;
        }

        .list-item {
            display: flex;
            height: 50px;
            overflow: hidden;
            border: 1px solid blue;
        }

        .list-item.align-start {
            align-items: start;
        }

        .list-item.align-center {
            align-items: center;
        }

        .item-label {
            padding-inline: 0.25rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        span.item-button {
            color: red;
        }

        span.item-button:hover+div.list-item {
            border: 1px solid red;
        }
Je nachdem wie Du die Elemente anordnen willst, geht es u. U. auch ohne zusätzlichen Container wenn Du Grid verwendest:
HTML: 
    <div class="selection">
        <div class="selection-list">
            <span class="item-button">X</span>
            <div class="list-item align-start">
                <span class="item-label">1. Oben ausgerichtet</span>
            </div>
            <span class="item-button">X</span>
            <div class="list-item align-center">
                <span class="item-label">2. Vertikal zentriert</span>
            </div>
        </div>
    </div>
CSS: 
        .selection {
            display: flex;
            min-height: 2.375rem;
            border: 1px solid black;
            overflow: hidden;
        }

        .selection-list {
            display: grid;
            grid-template-columns: auto auto;
            gap: 0.25rem 0.75rem;
            padding: 0.25rem 0.75rem;
            overflow: hidden;
        }

        .list-item {
            display: flex;
            height: 50px;
            overflow: hidden;
            border: 1px solid blue;
        }

        .list-item.align-start {
            align-items: start;
        }

        .list-item.align-center {
            align-items: center;
        }

        .item-label {
            padding-inline: 0.25rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        span.item-button {
            color: red;
        }

        span.item-button:hover+div.list-item {
            border: 1px solid red;
        }
(Fontawesame hatte ich gerade nicht zur Hand.)
 
Zuletzt bearbeitet:
PS: Meine erste Version mit dem zusätzlichen Wrapper funktionierte zunächst nicht, ich musste ein "min-width" hinzu fügen:
Code: 
        .list-item-wrapper {
            display: flex;
            align-items: center;
            min-width: 1px;
        }
 
Hallo,

Danke für dein bemühen.

Ich dachte es gibt vll. einen einfacheren Trick. Ich habe mich jetzt für die 3. Methode "line-height" entschieden. Da der Text eh nicht umgebrochen wird, sollte das kein Problem darstellen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück