Html 使用CSS3自动滚动溢出文本

我有一个有限的区域来显示长文本。它应该用省略号包装。当你把鼠标放在它上面时，它应该滚动到它的末尾，所以我想出了一个办法，但我有一些问题

它在Opera浏览器上不起作用

它使用静态宽度属性

div.content:hover {

   width:742px;

}

甚至文本也更短；它以静态持续时间滚动

我怎样才能解决这个问题

编辑：我用JavaScript解决了所有这些问题，但是一个纯CSS3解决方案仍然很好，因为我讨厌在JavaScript代码中注入CSS规则

测试：（你可以根据自己的需要修改动画中的正确属性）

测试：（你可以修改动画中与你想要的相同的正确属性）

---

感谢您的努力，但我不需要线性过渡的自定义动画。我只想根据文本宽度给出一个动态的持续时间，这是我最后一次用js编辑时的结果。谢谢你的努力，但我不需要线性转换的自定义动画。我只想根据文本宽度给出一个动态的持续时间，这是我最后一次用js编辑时得到的。

div.content:hover {
    -webkit-animation: slide 5.0s linear;
    -moz-animation: slide 5.0s linear;
    -o-animation: slide 5.0s linear;
    animation: slide 5.0s linear;
    width:742px;
    right:0px;
    text-overflow: clip;
}

@-webkit-keyframes slide {
    0% { right:-665px;}
    50% { right:-340px;}
    100% { right:-0px; }
}

@-moz-keyframes slide {
    0% { right:-665px;}
    50% { right:-340px;}
    100% { right:-0px; }
}

@-o-keyframes slide {
    0% { right:-665px;}
    50% { right:-340px;}
    100% { right:-0px; }
}

@-khtml-keyframes slide {
    0% { right:-665px;}
    50% { right:-340px;}
    100% { right:-0px; }
}

@keyframes slide {
    0% { right:-665px;}
    50% { right:-340px;}
    100% { right:-0px; }
}