为了确保只有出现省略号的文本在鼠标悬停时滚动，而短文本不会滚动，可以通过JavaScript来检测文本是否溢出，并根据检测结果来控制动画的触发。
以下是修正后的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Overflow with Scroll</title>
<style>
.container {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
}
.scrollable {
overflow: visible;
}
.scrollable .content {
animation: scrollText 10s linear infinite;
}
.content {
display: inline-block;
padding-right: 100%;
}
@keyframes scrollText {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
</head>
<body>
<div class="container" id="text1">
<div class="content">
This is some really long text that will overflow and show an ellipsis.
</div>
</div>
<div class="container" id="text2">
<div class="content">
Short text.
</div>
</div>
<script>
document.querySelectorAll('.container').forEach(container => {
const content = container.querySelector('.content');
if (content.scrollWidth > container.clientWidth) {
container.classList.add('scrollable');
}
});
</script>
</body>
</html>
说明
- CSS部分:
- 保持
.container和.content的基础样式不变。 - 添加
.scrollable类用于控制动画触发，只有在文本溢出的情况下才会添加该类。 - 当容器有
.scrollable类时，overflow: visible以及动画会被触发。
- JavaScript部分:
- 使用
document.querySelectorAll('.container')选择所有的文本容器。 - 对每个容器，检测其内容的
scrollWidth是否大于容器的clientWidth。 - 如果是，则添加
.scrollable类，使其能够在鼠标悬停时滚动。
这样，只有溢出且显示省略号的文本在鼠标悬停时才会触发滚动效果，短文本不会受到影响。