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

marqueeの幅: px

文字列の幅: px

HTML

<p>marqueeの幅: <span class="marqueeWidth"></span>px</p>
<p>文字列の幅: <span class="pWidth"></span>px</p>
<hr>
<div class="marquee">
  <p>あいうえおかきくけこさしすせそたちつてとなにぬねの</p>
</div>

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%);}
}

JavaScript

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';
}