Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Place text after dots inline with the second line of text overflow ellipsis

Tags:

html

css

ellipsis

I need to hide a part of the text that is longer than 2 lines and add '...123 T.' as an indicator of the hidden overflow, like below:

enter image description here

What I have so far: https://plnkr.co/edit/NTlv4NpyhRTzJkNQ?preview

Html:

<div class="outside-container">
      <span class="container">
        <span class="main-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi,
          dapibus sit amet posuere eu, porttitor condimentum nulla. Donec
          convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam
          sollicitudin lacus ipsum, at tincidunt ante condimentum vitae.
        </span>
        <span class="small-text">123 T.</span>
      </span>

      <span class="container">
        <span class="main-text">
          Lorem ipsum
        </span>
        <span class="small-text">123 T.</span>
      </span>

      <span class="container">
        <span class="main-text">
          Lorem ipsum dolor sit ameta,  adipiscing elit. Nam metus
        </span>
        <span class="small-text">123 T.</span>
      </span>
</div>

CSS:

.outside-container {
  width: 200px;
}

.container{
  max-width: 200px;
}

.main-text {
  overflow: hidden;
  vertical-align: middle;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.small-text {
  color: #8e8f8f ;
  font-size: 10px;
  vertical-align: middle;
}
like image 608
Ketija Krista Avatar asked Jul 11 '20 09:07

Ketija Krista


People also ask

How do you overflow text on an ellipsis?

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.

How do you add ellipsis to text in HTML?

To add an ellipsis in the HTML <span> element having the CSS overflow property set to “hidden”, you need to add the text-overflow property. Use its “ellipsis” value, which will add dots at the end of the content within the <span>.

How do I truncate text after two lines?

2) Truncate text after multiple lines using line-clamp With line-clamp text can be truncated after multiple lines, whats even more interesting is you can truncate it by specifying the line number where you want to truncate it. eg: -webkit-line-clamp: 3; will truncate start truncating the text from the third line.


1 Answers

In the future you will be able to do this with only one line of code using:

line-clamp: 2 "...123 T.";

You can find more detail in the specification:

The line-clamp property is a shorthand for the max-lines, block-ellipsis, and continue properties.

It allows limiting the contents of a block container to the specified number of lines; remaining content is fragmented away and neither rendered nor measured. Optionally, it also allows inserting content into the last line box to indicate the continuity of truncated/interrupted content.

enter image description here

Until then, here is a very hacky idea to achieve the result:

.container {
  max-width: 200px;
  margin: 5px;
}

.main-text {
  line-height: 1.2em; /* the height of a line */
  max-height: calc(2 * 1.2em); /* restrict the height to 2 lines*/
  overflow: hidden;
  display: inline-block;
  position: relative;
}

.main-text:after {
  content: "123 T.";
  display:inline-block;
  width:40px;
  position:relative;
  z-index:999;
  /* a big box-shadow to hide the span element used for the ellipsis */
  box-shadow:
    40px 0 0 #fff,
    80px 0 0 #fff,
    120px 0 0 #fff,
    160px 0 0 #fff;
  /**/
  color: #8e8f8f;
  font-size: 10px;
  background: #fff; /* white background to cover the text behind */
  margin-left:2px;
}

/* this will replace the ellipsis */
.main-text span {
  position: absolute;
  /* position at the bottom right */
  top: 1.2em; /* height of one line */
  right: 0;
  padding: 0 3px;
  background: #fff; /* white background to cover the text behind */
}

.main-text span:before {
  content: "..."; /* the dots*/
}

/* the text after the dots */
.main-text span:after {
  content: "123 T.";
  color: #8e8f8f;
  font-size: 10px;
<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
    vitae. <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lo <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
  </div>
</div>

Or like below if you want the text to appear only with the dots:

.container {
  max-width: 200px;
  margin: 5px;
}

.main-text {
  line-height: 1.2em; /* the height of a line */
  max-height: calc(2 * 1.2em); /* restrict the height to 2 lines*/
  overflow: hidden;
  display: inline-block;
  position: relative;
}

.main-text:after {
  content: "."; /* at least one character to set the height */
  display:inline-block;
  width:40px;
  position:relative;
  z-index:999;
  /* a big box-shadow to hide the span element used for the ellipsis */
  box-shadow:
    40px 0 0 #fff,
    80px 0 0 #fff,
    120px 0 0 #fff,
    160px 0 0 #fff;
  /**/
  color: transparent; /* no colorataion*/
  font-size: 10px;
  background: #fff; /* white background to cover the text behind */
  margin-left:2px;
}

/* this will replace the ellipsis */
.main-text span {
  position: absolute;
  /* position at the bottom right */
  top: 1.2em; /* height of one line */
  right: 0;
  padding: 0 3px;
  background: #fff; /* white background to cover the text behind */
}

.main-text span:before {
  content: "..."; /* the dots*/
}

/* the text after the dots */
.main-text span:after {
  content: "123 T.";
  color: #8e8f8f;
  font-size: 10px;
<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
    vitae. <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lo <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
  </div>
</div>
like image 172
Temani Afif Avatar answered Sep 25 '22 02:09

Temani Afif