JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="https://kswedberg.github.io/jquery-expander/jquery.expander.js"></script>
<div class="toolong">
<div id="div1" class="fulltext"> <b>Div1:</b> This is a sentence at the end of the first 100 characters that gets truncated such that characters 101 to infinity are not shown inline with the beginning of the sentence (<b>Div1</b>).</div>
</div>
<div class="toolong">
<div id="div2" class="fulltext"><b>Div2:</b>This is a sentence at the end of the first 100 characters that gets truncated such that characters 101 to infinity are not shown inline with the beginning of the sentence (<b>Div2</b>).</div>
</div>

CSS

.fulltext {
    display: block;
}

JavaScript

$('.toolong').expander({
  slicePoint: 80,
  preserveWords: true,
  widow: 2,
  expandEffect: 'fadeIn',
  userCollapseEffect: 'fadeOut',
  expandText: '<i class="icon-plus-sign"></i>',
  userCollapseText: '<i class="icon-minus-sign"></i>'
});