JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slice">
  Большой большой текст который надо обрезать, ну еще  
  не много напишу и еще и еще и еще - все!хватит!
</div>
<div id="show">Показать</div>
<div id="hide">Скрыть</div>

CSS

#show, #hide {
 width: 50%;
 position:absolute;    
}
#show {
 background:blue;
 left: 0;
}
#hide {
  background:red;
  right: 0;     
}

JavaScript

function warAndPis (elemText, elemShow, elemHide) {
////////////////////////////////////
// 1. Обрезание
////////////////////////////////////
 var elem = document.getElementById(elemText);
 var text = elem.innerHTML;
 var sideForView = Math.round(text.length/2);
 var forInsert = text.slice(0, sideForView);
 elem.innerHTML = forInsert + '...';
///////////////////////////////////
// 2. Работа с кнопками show/hide
///////////////////////////////////
// 2.1 show
document.getElementById(elemShow).onclick = function () {
    elem.innerHTML = text;
  }
// 2.2 hide
document.getElementById(elemHide).onclick = function () {
    elem.innerHTML = forInsert + '...'; 
  }    
}
warAndPis('slice', 'show', 'hide');