trabocco Testo puntini di sospensione a sinistra

Question

Considerate questo html/css frammento:

.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>

mostra due contenitori a larghezza fissa con un testo troppo lungo per essere, con troppopieno impostato per mostrare un'ellissi per mostrare che il testo è nascosto. Il primo contenitore è giustificato a sinistra, il secondo è giustificato a destra.

Il risultato mostra che l'ellissi si trova sulla destra per entrambi gli esempi.

Tuttavia, per la seconda a destra giustificato uno, mi piacerebbe ottenere questo:

...4555666777888999 

invece di

1112223334445556... 

è possibile?

Answer 1

È possibile impostare la direzione del testo da destra a sinistra con direzione css proprietà direction: rtl:

.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>

direzione

Impostare la proprietà direzione CSS per abbinare la direzione del testo: rtl per le lingue scritte da destra a sinistra (come l'ebraico o arabo) il testo e litri per altri script. Questo è tipicamente fatto come parte del documento (ad esempio, utilizzando l'attributo dir in HTML) piuttosto che tramite l'uso diretto di CSS da parte di .

Riferimenti

MDN direction

Answer 2

Per ottenere questo effetto è necessario utilizzare un piccolo hack. Vedere l'esempio seguente:

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>

Maggiori informazioni su questo si possono trovare qui: http://hugogiraudel.com/2014/12/16/css-riddle-reverse-ellipsis/