<div id="test">test et bakalım ne kadar uzun bir yazı</div>
@import "compass/css3";

@mixin dotdotdot($width, $display: block){
  width: $width;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: $display;
}
@mixin dotdotdot_passive(){
  width: auto;
  overflow: auto;
  white-space: inherit;
  text-overflow: inherit;
}

#test {
  @include dotdotdot(60px);
  &.passive {
    @include dotdotdot_passive();
  }
}
$('#test').on('click', function(){
  $(this).toggleClass('passive');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js