JavaScriptで文字列が範囲を超えない場合はmarqueeオフ

marqueeとは

文字が右から左に動くやつ。CSSだけで作成可能。

.marquee {
  overflow: hidden;
  width: 300px;
  background-color: #eee;
}
.marquee p {
  display: inline-block;
  margin: 0;
  white-space:nowrap;
}
.marquee p.on {
  -webkit-animation: marquee linear 10s infinite;
  animation: marquee linear 10s infinite;
}
@-webkit-keyframes marquee {
  0% { -webkit-transform: translate(100%);}
  100% { -webkit-transform: translate(-100%);}
}
@keyframes marquee {
  0%   { transform: translate(100%);}
  100% { transform: translate(-100%);}
}

文字列が範囲を超えない場合はmarqueeオフ

JavaScriptのoffsetWidthで文字列と特定の範囲の幅を取得すれば、自動的に文字列が範囲を超える場合はmarqueeオフ、超える場合はmarqueeをオンにすることができる。

var marquee = document.querySelector('.marquee');
var marqueeWidth = marquee.offsetWidth;
document.querySelector('.marqueeWidth').innerHTML = marqueeWidth;
var p = document.querySelector('.marquee > p');
var pWidth = p.offsetWidth;
document.querySelector('.pWidth').innerHTML = pWidth;
if (pWidth > marqueeWidth) {
  p.className = 'on';
}

文字列部分が動的に入り、文字数が変化する場合や、文字列の幅がフォントによってはみ出したり、はみ出さなかったりするようなときはこちらの方法を利用したほうが良い。

marqueeオンのサンプル（文字列が指定した範囲を超える）

marqueeオフのサンプル（文字列が指定した範囲を超えない）

AngularJS使用のmarqueeオン・オフのサンプル