Skip to content

Commit

Permalink
update-text-trim()
Browse files Browse the repository at this point in the history
  • Loading branch information
@hyunguyen
hyunguyen committed Sep 19, 2017
1 parent 9ed6d0f commit 4592412
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 5 deletions.
18 changes: 18 additions & 0 deletions html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,30 @@ <h3>Resize window to check the result when rezing</h3>
<img src="theme/images/cactus.png" alt="">
<div class="paragraph-content">
<h3>The 1st Paragraph <small>(lines: 2)</small></h3>
<p class="dotstail-1" style="width: 140px">
khách sạn Pullman
</p>
<p class="dotstail-1">
Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum! Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
<p class="dotstail-1">
Ouasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum! Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
<p class="dotstail-1">
Ruasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum! Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
<p class="dotstail-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
<p class="dotstail-1">
Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum! Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
<p class="dotstail-1">
Ouasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum! Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
<p class="dotstail-1">
Ruasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum! Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
</div>
</div>
<div class="paragraph">
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "dotstail",
"version": "1.3.0",
"version": "1.3.1",
"description": "Dotstail- help you to make multiple lines elipsis",
"main": "dotstail.min.js",

Expand Down
23 changes: 23 additions & 0 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,36 @@ <h3>Resize window to check the result when rezing</h3>
<img src="theme/images/cactus.png" alt="">
<div class="paragraph-content">
<h3>The 1st Paragraph <small>(lines: 2)</small></h3>
<p class="dotstail-1" style="width: 140px">
khách sạn Pullman
</p>
<p class="dotstail-1">
Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum! Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam
eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
<p class="dotstail-1">
Ouasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum! Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam
eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
<p class="dotstail-1">
Ruasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum! Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam
eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
<p class="dotstail-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
<p class="dotstail-1">
Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum! Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam
eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
<p class="dotstail-1">
Ouasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum! Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam
eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
<p class="dotstail-1">
Ruasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum! Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam
eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
</div>
</div>
<div class="paragraph">
Expand Down
2 changes: 1 addition & 1 deletion public/theme/js/dotstail.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions theme/js/dotstail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,12 @@ var dotstail = {

var text_local = function(){
maxHeight = parseFloat(window.getComputedStyle(el).getPropertyValue('line-height')) * pr_lines;
text_use = text_cache;
for (var i = 0; i < text_use.length; i++) {
text_use = text_cache.trim();
for (var i = 0; i < text_use.length + 1; i++) {
el.textContent = text_use.slice(0, [i]);
var height = parseFloat(el.offsetHeight);
if (height > maxHeight) {
return el.textContent = text_use.slice(0, [i] - 3 - pr_letter) + "...";
return el.textContent = text_use.slice(0, [i] - 4 - pr_letter) + "...";
}
}
}
Expand Down

0 comments on commit 4592412

Please sign in to comment.