JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<div class="box">
<p class="demo" id="dd1">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p class="demo" id="dd2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere culpa expedita nam consequuntur, dignissimos explicabo quasi aperiam repudiandae quia saepe! Eaque, neque amet incidunt nesciunt dicta suscipit eveniet at, dolorem voluptates similique repudiandae esse velit ea voluptatibus vitae obcaecati ducimus itaque odit mollitia facere assumenda possimus aliquid consequuntur. Recusandae earum maiores unde adipisci quia, facere rem quos nobis explicabo expedita reiciendis deleniti consequuntur inventore hic rerum, delectus nostrum reprehenderit eius fugit aliquam dolores. Ab impedit quidem dignissimos, facere distinctio tempora explicabo, magnam nisi vel animi iusto eligendi. Vitae nostrum modi nam adipisci esse, quasi pariatur consequuntur soluta, deserunt qui cupiditate repudiandae provident nemo fugit nesciunt accusantium, aut sed ad? Repudiandae fuga veritatis aliquid vero voluptates porro, quis corrupti accusantium exercitationem molestiae nemo obcaecati? Obcaecati in quam natus quos eius enim itaque fugit hic distinctio quis maiores, laborum provident saepe ipsa reiciendis illum dolores nesciunt, ratione voluptatem repellendus, repellat omnis quae.</p>
<p class="demo" id="dd3">QQQQ None MMMM</p>
</div>

CSS

.box {
width: 300px;
padding: 10px;
border: #ef5c28 2px solid;
}

/* .ellipsis {
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;} */

JavaScript

$(function(){
  let len = 50;
  $('.demo').each(function(){ 
	  var str1=""
	  switch ($(this).attr("id")){
	    case 'dd1' : str1="..."+"<a href='https://www.hinet.net/' target='_blank'>顯示更多</a>";
	      break;
	    case 'dd2' : str1="..."+"<a href='https://tw.yahoo.com/' target='_blank'>顯示更多</a>";
	      break;
	    default: str1="" 
    }
    //
    if($(this).html().length >len){   
      var str2=$(this).html().substring(0,len-1)+str1;
      $(this).html(str2);
    } 
  });
});