Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Медленно обрезается текст

Автор: sashgera 10.6.2016, 16:43

Здравствуйте
Есть JS, который в цикле обрезает текст. Текст обрезается и с этим проблем нет. Но на сайте, как мне кажется, текст обрезается медленно.
Посмотрите, плиз, код JS на предмет ошибок

Код


<style type="text/css">
.wrapper {width:190px; height: 50px; border: 1px solid black;}
.d2 {float:left; padding: 0 10px; background-color:#0F0;}
.d3 {float:left; padding: 0 10px; background-color:#FF0;}
</style>
 
<div class="wrapper"> 
  <div class="d1">
     <div class="d2">>>>></div>
     <div class="d3">Этот текст больше ширины дива wrapper и поэтому его нужно обрезать.</div>
  </div>
</div>

Код


<script>
$(document).ready(function(){
    var nameTrim = $(".d3").outerWidth() - 1;
    for (; $(".d3").outerWidth() >= ($(".d1").outerWidth() - $(".d2").outerWidth()); --nameTrim) {
        $(".d3").text('...' + $(".d3").text().slice(-nameTrim));
    }
});    
</script>

Автор: YahоО 27.6.2016, 22:54

Почему бы не так:

Код


<style>
.wrapper{
 display: inline-block;
 border: 1px solid black;
 font-family: 'Times New Roman', Times, serif;
 font-size: 250%;
}
.d2 {float:left; padding: 0 10px; background-color:#0F0;}
.d3 {float:left; padding: 0 10px; background-color:#FF0;}
</style>
<div class="wrapper">
  <div class="d1">
   <div class="d2">abcd</div>
   <div class="d3">тотd3 текст больше ширины дива wrapper и поэтому его нужно обрезать.</div>
  </div>
</div>
<script>
$(document).ready(function(){
 while($(".d3").outerWidth()>$(".d2").outerWidth()){$(".d3").text($(".d3").text().substr(0,$(".d3").text().length-1))}
});
</script>