Text Überlauf mit drei Punkten auf der linken Seite

Question

Betrachten Sie diesen HTML/CSS-Schnipsel:

.l { text-align: left; } 
 
.r { text-align: right; } 
 

 
p { 
 
    width: 150px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    border: solid 1px green; 
 
}

<p class="l">111222333444555666777888999</p> 
 
<p class="r">111222333444555666777888999</p>

Es zeigt zwei mit fester Breite Behälter mit etwas Text zu lang passen, mit Überlauf gesetzt, um anzuzeigen eine Ellipse, um zu zeigen, dass ein Text versteckt ist. Der erste Container ist linksbündig, der zweite ist rechtsbündig.

Das Ergebnis zeigt, dass die Ellipse für beide Beispiele rechts ist.

jedoch gerechtfertigt für die zweite Straße rechts ein, ich möchte dies erreichen:

...4555666777888999 

statt

1112223334445556... 

Ist das möglich?

Answer 1

Sie die Richtung des Textes von rechts einstellen direction: rtl mit CSS Richtung Eigenschaft nach links:

.l { 
 
    text-align: left; 
 
    direction: rtl; 
 
} 
 
.r { 
 
    text-align: right; 
 
} 
 
p { 
 
    width: 150px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    border: solid 1px green; 
 
}

<p class="l">111222333444555666777888999</p> 
 
<p class="r">111222333444555666777888999</p>

Richtung

die Richtung CSS-Eigenschaft Stellen Sie die Richtung des Textes entsprechen: rtl für Sprachen von rechts nach links (wie Hebräisch oder Arabisch) Text und ltr für andere geschrieben Skripte. Dies erfolgt typischerweise als Teil des Dokuments (z. B. unter Verwendung des Verzeichnisattributs in HTML) anstatt über direkte Verwendung von CSS durch .

Referenzen

MDN direction

Answer 2

Um diesen Effekt zu erhalten, müssen Sie einen kleinen Hack verwenden. Siehe das folgende Beispiel:

p { 
 
    border:1px solid #000; 
 
    width:150px; 
 
} 
 
.ellipsis { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
.reverse-ellipsis { 
 
    text-overflow: clip; 
 
    position: relative; 
 
    background-color: white; 
 
} 
 
.reverse-ellipsis:before { 
 
    content: '\02026'; 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: -1em; 
 
    background-color: inherit; 
 
    padding-left: 1em; 
 
    margin-left: 0.5em; 
 
} 
 

 
.reverse-ellipsis span { 
 
    min-width: 100%; 
 
    position: relative; 
 
    display: inline-block; 
 
    float: right; 
 
    overflow: visible; 
 
    background-color: inherit; 
 
    text-indent: 0.5em; 
 
} 
 
.reverse-ellipsis span:before { 
 
    content: ''; 
 
    position: absolute; 
 
    display: inline-block; 
 
    width: 1em; 
 
    height: 1em; 
 
    background-color: inherit; 
 
    z-index: 200; 
 
    left: -.5em; 
 
}

<p class="ellipsis reverse-ellipsis"> 
 
    <span>111222333444555666777888999</span> 
 
</p> 
 
<p class="ellipsis">111222333444555666777888999</p>

Weitere Informationen hierzu finden Sie hier: http://hugogiraudel.com/2014/12/16/css-riddle-reverse-ellipsis/