Tekst przelewowy z wielokropkiem na lewym

Question

Rozważmy następujący html/css fragment:

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

pokazuje dwa pojemniki o stałej szerokości z tekstem zbyt długa, by zmieścić, z przelewem ustawiony aby pokazać elipsa pokazująca, że ​​jakiś tekst jest ukryty. Pierwszy pojemnik jest wyrównany do lewej strony, drugi jest uzasadniony w prawo.

Wynik pokazuje, że elipsa znajduje się po prawej dla obu przykładów.

Jednakże, dla drugiego prawa uzasadnione jeden, chciałbym aby to osiągnąć:

...4555666777888999 

zamiast

1112223334445556... 

Czy to możliwe?

Answer 1

Można ustawić kierunek tekstu od prawej do lewej strony za pomocą właściwości kierunek css 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>

kierunek

Ustaw właściwość kierunek CSS, aby dopasować kierunek tekstu: rtl dla języków pisanych od prawej do lewej (jak hebrajski czy arabski) tekst oraz ltr dla innych skrypty. Zwykle jest to wykonywane jako część dokumentu (np. Za pomocą atrybutu dir w HTML), a nie poprzez bezpośrednie użycie CSS przez .

Referencje

MDN direction

Answer 2

Aby uzyskać ten efekt, należy użyć małego hacka. Zobacz poniższy przykład:

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>

Więcej informacji na ten temat można znaleźć tutaj: http://hugogiraudel.com/2014/12/16/css-riddle-reverse-ellipsis/