added support for formatted content in html

nzambello · Dec 23, 2017 · 2fae137 · 2fae137
1 parent 5a4bd04
commit 2fae137
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 17 deletions.
diff --git a/example/index.js b/example/index.js
@@ -49,11 +49,11 @@ function reset(resizeListenerAaa, resizeListenerLorem) {
   var aaa = elements[0];
   var loremIpsum = elements[1];
 
-  aaa.innerText =
+  aaa.innerHTML =
     'A a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a';
 
-  loremIpsum.innerText =
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+  loremIpsum.innerHTML =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>It works with formatted content, too.</strong> Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
 
   clearEllipsis(resizeListenerAaa, resizeListenerLorem);
   globalState.lastEllipsis = null;

diff --git a/index.html b/index.html
@@ -27,13 +27,14 @@ <h1>Ellipsed Text Testing</h1>
                 </div>
                 <div class="text">
                     <p class="lorem-ipsum">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla
-                        sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Vestibulum
-                        ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor
-                        sit amet aliquam vel, ullamcorper sit amet ligula. Mauris blandit aliquet elit, eget tincidunt nibh
-                        pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Mauris
-                        blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing
-                        elit.
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        <strong>It works with formatted content, too.</strong> Nulla quis lorem ut libero malesuada feugiat. Curabitur
+                        non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus.
+                        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit
+                        neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Mauris blandit aliquet elit, eget
+                        tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor
+                        lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet,
+                        consectetur adipiscing elit.
                     </p>
                 </div>
             </div>
@@ -65,4 +66,4 @@ <h1>Ellipsed Text Testing</h1>
 
         <script type="text/javascript" src="./example/index.js"></script>
     </body>
-</html>
+</html>
diff --git a/lib/ellipsed.js b/lib/ellipsed.js
@@ -98,10 +98,10 @@
 
     for (var i = 0; i < elements.length; i++) {
       var el = elements[i];
-      originalTexts[i] = el.textContent;
-      var splittedText = el.textContent.split(' ');
+      originalTexts[i] = el.innerHTML;
+      var splittedText = el.innerHTML.split(' ');
 
-      el.textContent = '';
+      el.innerHTML = '';
       var elStyle = window.getComputedStyle(el);
 
       splittedText.reduce(tokensReducer, {

diff --git a/src/ellipsed.js b/src/ellipsed.js
@@ -53,10 +53,10 @@ function ellipsis(selector = '', rows = 1, options = {}) {
 
   for (let i = 0; i < elements.length; i++) {
     const el = elements[i];
-    originalTexts[i] = el.textContent;
-    const splittedText = el.textContent.split(' ');
+    originalTexts[i] = el.innerHTML;
+    const splittedText = el.innerHTML.split(' ');
 
-    el.textContent = '';
+    el.innerHTML = '';
     const elStyle = window.getComputedStyle(el);
 
     splittedText.reduce(tokensReducer, {