javascript - Generating ellipsis AND "Read more" link with CSS -

[update] it's different question because it's not asking text truncation; mentioned, have text truncation using this approach. rather it's asking having "read more" link when text truncated (using css if possible).

currently i'm using this approach generate ellipsis when text overflows (when cannot fit 1 line). however, want include 'read more' link @ end of line when overflow occurs , clicking link display content on multiple lines. doable css only?

btw, saw this post, displays "more" link no matter text has overflown or not, not want.

i guess last resort using javascript resize() listener dynamically hides overflown portion of text , creates link show them.

thanks!

that's not doable only css.

here's rather hacky solution: in javascript, remove .truncate class @ un-truncated width, generate read more link if width of text cause truncated.

var truncated = document.getelementsbyclassname("truncate");    (var = 0; < truncated.length; i++) {      var t = truncated[i];        // remove truncate class @ un-truncated width      t.classlist.remove("truncate");      t.style.display = "inline-block";      // w = un-truncated width      var w = t.clientwidth;      // restore styling      t.style.display = "";      t.classlist.add("truncate");        // 250 corresponds width in css      if (w >= 250) {          // generate read more link          var readmore = document.createelement("a");          readmore.href = "#";          readmore.innertext = "read more";          t.parentnode.insertbefore(readmore, t.nextsibling);      }  }

.truncate {      width: 250px;      white-space: nowrap;      overflow: hidden;      text-overflow: ellipsis;  }

<div class="truncate">lorem ipsum dolor sit amet, consectetur adipisicing elit. qui iusto quos praesentium et cupiditate nostrum, suscipit voluptates sint eos amet vel quisquam, consequuntur hic necessitatibus, quibusdam ex repellat error odio.</div>  <hr>  <div class="truncate">hello</div>