Здравствуйте. Есть условие, если ширина двух блоков (.d2 и .d3) будет больше ширины блока .d1 - тогда нужно обрезать текст в блоке .d3
Но обрезать не просто на какое-то количество символов, а на столько, чтобы текст уместился по всей ширине этого блока.
/без CSS, только JS/

<style type="text/css">
.wrapper {width:190px;}
.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">Этот текст, увеличил ширину блока и блок съехал на другую строку.</div>
  </div>
</div>

<script>
$(document).ready(function(){
var d1 = $('.d1').outerWidth(),
    d2 = $('.d2').outerWidth(),
    d3 = $('.d3').outerWidth(),
    d23 = (d2 + d3);
 if(d1 <= d23) {
  // как обрезать текст в начале строки  в .d3 на столько, чтобы он уместился по всей ширине этого блока и не съезжал на другую строку?
 }
});
</script>