Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text overflow with ellipsis on the left [duplicate]

Tags:

html

css

Consider this html/css snippet:

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

It shows two fixed-width containers with some text too long to fit, with overflow set to show an ellipsis to show that some text is hidden. The first container is left justified, the second is right justified.

The result shows that the ellipsis is on the right for both examples.

However, for the second right justified one, I'd like to achieve this:

...4555666777888999

instead of

1112223334445556...

Is this possible?

like image 662
BG100 Avatar asked Jan 15 '16 12:01

BG100


People also ask

How do you overflow an ellipsis text?

To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: ''; . This keyword value will display an ellipsis ( '…' , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text.

Why does text-overflow ellipsis doesn't work?

text-overflow: ellipsis only works when the following is true: Parent element is not set to display: inline (span's default,) You must use display: block or display: inline-block. The element's width must be constrained in px (pixels) – it doesn't work with values specified using % (percent.)


2 Answers

You can set the direction of text from right to left using css direction property 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>

direction

Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.

References

MDN direction

like image 146
Alex Char Avatar answered Sep 28 '22 01:09

Alex Char


To get this effect you have to use a little hack. See the following example:

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>

More information about this you can find here: http://hugogiraudel.com/2014/12/16/css-riddle-reverse-ellipsis/

like image 45
Sebastian Brosch Avatar answered Sep 28 '22 01:09

Sebastian Brosch