HTML滚动文字竖着

解决方案

在HTML中实现文字竖向滚动，可以通过CSS的writing-mode属性来设置文字方向为竖排，并结合@keyframes动画实现滚动效果。还可以通过JavaScript动态控制滚动行为，或者使用更简单的marquee标签（尽管它已被部分浏览器弃用）。几种实现方法，帮助开发者根据需求选择合适的方案。

方法一：使用CSS和HTML实现竖向滚动

实现步骤

使用writing-mode: vertical-rl;将文字方向设置为竖排。
利用CSS动画@keyframes创建滚动效果。
设置容器的高度和溢出隐藏，确保文字滚动时只显示部分内容。

示例代码

html
</p>



    
    
    <title>竖向滚动文字</title>
    
        .scroll-container {
            width: 50px; /* 容器宽度 */
            height: 200px; /* 容器高度 */
            overflow: hidden; /* 隐藏超出部分 */
            border: 1px solid #ccc; /* 边框样式 */
        }

        .scroll-text {
            writing-mode: vertical-rl; /* 文字竖排 */
            white-space: nowrap; /* 防止文字换行 */
            animation: scrollUp 5s linear infinite; /* 动画效果 */
        }

        @keyframes scrollUp {
            0% { transform: translateY(100%); } /* 起始位置 */
            100% { transform: translateY(-100%); } /* 结束位置 */
        }
    


    <div class="scroll-container">
        <div class="scroll-text">
            这是一段竖向滚动的文字，可以用来展示公告或提醒信息。
        </div>
    </div>



<p>

方法二：使用JavaScript动态控制滚动

实现步骤

创建一个包含竖排文字的容器。
使用JavaScript定时修改文字的位置，模拟滚动效果。
根据需求调整滚动速度或方向。

示例代码

html
</p>



    
    
    <title>JavaScript竖向滚动文字</title>
    
        .scroll-container {
            width: 50px;
            height: 200px;
            overflow: hidden;
            border: 1px solid #ccc;
        }

        .scroll-text {
            writing-mode: vertical-rl;
            white-space: nowrap;
            position: relative;
        }
    


    <div class="scroll-container">
        <div class="scroll-text" id="scrollText">
            这是通过JavaScript实现的竖向滚动文字。
        </div>
    </div>

    
        const textElement = document.getElementById('scrollText');
        let position = 0;

        function scrollText() {
            position -= 1; // 每次向上移动1像素
            if (position <= -textElement.offsetHeight) {
                position = 0; // 回到初始位置
            }
            textElement.style.top = position + 'px';
        }

        setInterval(scrollText, 30); // 每30毫秒更新一次位置
    



<p>

方法三：使用`marquee`标签（不推荐）

虽然<marquee>标签可以直接实现滚动效果，但由于其已被现代浏览器逐步弃用，建议仅用于兼容性要求较低的场景。

示例代码

html
</p>



    
    
    <title>Marquee竖向滚动文字</title>
    
        marquee {
            writing-mode: vertical-rl;
            white-space: nowrap;
        }
    


    
        这是使用marquee标签实现的竖向滚动文字。
    



<p>