溢出容器时滚动文本答案

【问题标题】：Scroll text when it overflows container溢出容器时滚动文本
【发布时间】：2018-07-21 14:50:03
【问题描述】：

我已经搜索过这个，但找不到答案。我有一个 div 显示“谁在播放在线广播”。

div的宽度为200px，当艺术家+歌曲标题较长时，文本被截断（溢出：隐藏）。

我想让整个文本从左到右滚动，所以当左侧超出 div 时，文本的右侧变得可见。有人可以让我走上正轨吗？

谢谢。

<div class="radioco_song">EBTG - Driving (The Underdog Remix)</div>

和

.radioco_song {
font-size: 16px !important;
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #ccc;
padding: 10px;
}

【问题讨论】：

你当前的代码是什么？
更新了我原来的帖子。谢谢。
您需要为此创建 2 个 div。第一个带有溢出隐藏和最大宽度。内部 div 有溢出滚动且没有固定宽度。
这不起作用，我希望标题移动，就像一个带有 behavior="alternate" 的选框，但只有当文本比 div 长时。

标签： jquery html css

【解决方案1】：

我认为这就是你想要的：

function startMarquee() {
  var menuItemWidth = $(this).width();
  var listItemWidth = $(this).parent().width();

  if (menuItemWidth > listItemWidth) {
    var scrollDistance = menuItemWidth - listItemWidth;
    var listItem = $(this).parent();
    listItem.stop();
    listItem.animate({
      scrollLeft: scrollDistance
    }, 3000, 'linear');
  }
}

function stopMarquee() {
  var listItem = $(this).parent();
  listItem.stop();
  listItem.animate({
    scrollLeft: 0
  }, 'medium', 'swing');
}

$('#menu a').hover(startMarquee, stopMarquee);

#menu {
  margin: 10px;
}

#menu > div {
  width: 100px;
  overflow: hidden;
  font-family: sans-serif;
}

#menu > div a {
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <div><a href="#">Short</a></div>
  <div><a href="#">Some really long link text here...</a></div>
  <div><a href="#">Another really, really, really long piece of text here</a></div>
</div>

Fiddle by：布赖恩贾梅斯罗斯

【讨论】：

【解决方案2】：

只需更改溢出：滚动。 .radioco_song { font-size: 16px !important; white-space: nowrap; width: 200px; overflow: scroll; border: 1px solid #ccc; padding: 10px; }

【讨论】：