<!DOCTYPE html>
<html>
<head>
<title>打字效果</title>
<style>
#text {
font-size: 20px;
white-space: nowrap;
/*overflow: hidden;*/
}
</style>
</head>
<body>
<div style=" width: 100px;">
<div id="text"></div>
</div>
<script>
var text = "这是一段很长的文本，需要动态地展示并可能在超出容器宽度时换行。这是一段很长的文本111112223我";
var textElement = document.getElementById("text");
var currentIndex = 0;
var intervalId = setInterval(function() {
if (textElement.offsetWidth >= textElement.parentNode.offsetWidth) {
textElement.style.whiteSpace = "normal";
} else {
textElement.style.whiteSpace = "nowrap";
}
textElement.textContent = text.slice(0, currentIndex);
currentIndex++;
if (textElement.offsetWidth >= textElement.parentNode.offsetWidth && currentIndex < text.length) {
textElement.textContent += "n";
}
// 当文本完全显示完之后，清除定时器以防止内存泄漏
if (currentIndex > text.length) {
clearInterval(intervalId);
}
}, 100); // 控制打字速度，单位是毫秒
</script>
</body>
</html>正文完