Question

我已经搜索过了，但是找不到答案。我有一个div，显示在线电台的“谁在玩”。

div的宽度为200像素，当歌手和歌曲标题很长时，文本会被截断（溢出：隐藏）。

我想使整个文本从左向右滚动，因此当左侧超出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;
}

Answer 1

我认为这就是您想要的：

<strong><?= e(get($reward, "title")) ?></strong>

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

Fiddle by：bryanjamesross

Answer 2

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

容器溢出时滚动文本

2 个答案: