如果文本溢出 div 区域，如何垂直自动滚动文本

Question

我创建了一个提取铁路数据的铁路应用程序。有时中转出发信息会超出允许的div区域。

如果文本溢出指定的 div，如何自动垂直滚动该文本？

我正在使用 CSS 和 JavaScript 的组合，但我没有添加任何动画，因为不确定实现此目的的方式。

 body {
        background: #000;
        font-family: 'Open Sans';
        color: #fff;
        overflow: hidden;
        margin: 0;
        width: 500px;
        height: 5000px;
        font-size: 6vh;
    }



    .depContainer {
        overflow: hidden;
        position: absolute;
        top: 7%;
        width: 100%;
        height: 93%;
        display: grid;
        grid-gap: 0;
        grid-template-rows: 20;
    }

    .depContainer>div {

        padding: 20px 0;
        font-size: 2vh;
        font-weight: 700;
        border-bottom: #ddd 2px solid;
    }

    .deps {
        overflow: hidden;
        position: absolute;
    }

    .rdue {
        left: 1%;
        width: 12%;
    }

    .rdest {
        left: 13%;
        width: 51%;
    }

    .rplatform {
        left: 63%;
        width: 11%;
        text-align: center;
    }

    .rstatus {
        left: 73.5%;
        width: 26%;
        text-align: right;
    }

    .rvias {
        position: absolute;
        overflow: hidden;
        text-align: left;
        left: 1%;
        width: 98%;
        font-size: 1.6vh;
        margin-top: 6%;
        max-height: 5%;
    }

<div class="depContainer">

        <!-- Row 2 -->
        <div>
            <div id="RTime0" class="deps rdue">Due</div>
            <div id="RDest0" class="deps rdest">Destination</div>
            <div id="REstimatedTimeOfDepartureComment0" class="deps rstatus">Status</div>
            <div id="RStand0" class="deps rplatform">Platform</div>
            <div id="RVias0" class="deps rvias">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mi
                erat, finibus id purus non, lobortis imperdiet elit. Praesent et felis rhoncus, maximus lectus eu,
                volutpat ante. Fusce consequat ultricies nunc. In non eros tortor. Integer ultrices eu metus vitae
                lobortis. Praesent pretium, tortor vitae efficitur pharetra, orci urna porta nibh, vel egestas neque
                quam in erat. Aliquam lorem mauris, semper a sollicitudin at, consectetur quis ligula. Sed quis tortor
                nec nisl pretium vehicula. Curabitur sed dui a erat malesuada efficitur.</div>
        </div>

        <!-- Row 2 -->
        <div>
            <div id="RTime1" class="deps rdue">Due</div>
            <div id="RDest1" class="deps rdest">Destination</div>
            <div id="REstimatedTimeOfDepartureComment1" class="deps rstatus">Status</div>
            <div id="RStand1" class="deps rplatform">Platform</div>
            <div id="RVias1" class="deps rvias">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mi
                erat, finibus id purus non, lobortis imperdiet elit. Praesent et felis rhoncus, maximus lectus eu,
                volutpat ante. Fusce consequat ultricies nunc. In non eros tortor. Integer ultrices eu metus vitae
                lobortis. Praesent pretium, tortor vitae efficitur pharetra, orci urna porta nibh, vel egestas neque
                quam in erat. Aliquam lorem mauris, semper a sollicitudin at, consectetur quis ligula. Sed quis tortor
                nec nisl pretium vehicula. Curabitur sed dui a erat malesuada efficitur.</div>
        </div>


    </div>

Answer 1

您可以使用

overflow-x: auto

、

white-space: nowrap

轻松实现此目的 检查下面的代码片段，看看它是否符合您的期望

（我更改了一些宽度和高度值以便于测试）

body {
        background: #000;
        font-family: 'Open Sans';
        color: #fff;
        overflow: hidden;
        margin: 0;
        width: 500px;
        height: 5000px;
        font-size: 6vh;
    }



    .depContainer {
        overflow: hidden;
        position: absolute;
        top: 7%;
        width: 100%;
        height: 93%;
        display: grid;
        grid-gap: 0;
        grid-template-rows: 20;
    }

    .depContainer>div {

        padding: 20px 0;
        font-size: 2vh;
        font-weight: 700;
        border-bottom: #ddd 2px solid;
    }

    .deps {
        overflow: hidden;
        position: absolute;
    }

    .rdue {
        left: 1%;
        width: 12%;
    }

    .rdest {
        left: 13%;
        width: 51%;
    }

    .rplatform {
        left: 63%;
        width: 11%;
        text-align: center;
    }

    .rstatus {
        left: 73.5%;
        width: 26%;
        text-align: right;
    }

    .rvias {
        position: absolute;
        overflow-x: auto;
        white-space: nowrap;
        text-align: left;
        left: 1%;
        width: 50%;
        font-size: 2rem;
        margin-top: 6%;
        max-height: 10rem;
    }

<div class="depContainer">

        <!-- Row 2 -->
        <div>
            <div id="RTime0" class="deps rdue">Due</div>
            <div id="RDest0" class="deps rdest">Destination</div>
            <div id="REstimatedTimeOfDepartureComment0" class="deps rstatus">Status</div>
            <div id="RStand0" class="deps rplatform">Platform</div>
            <div id="RVias0" class="deps rvias">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mi
                erat, finibus id purus non, lobortis imperdiet elit. Praesent et felis rhoncus, maximus lectus eu,
                volutpat ante. Fusce consequat ultricies nunc. In non eros tortor. Integer ultrices eu metus vitae
                lobortis. Praesent pretium, tortor vitae efficitur pharetra, orci urna porta nibh, vel egestas neque
                quam in erat. Aliquam lorem mauris, semper a sollicitudin at, consectetur quis ligula. Sed quis tortor
                nec nisl pretium vehicula. Curabitur sed dui a erat malesuada efficitur.</div>
        </div>

        <!-- Row 2 -->
        <div>
            <div id="RTime1" class="deps rdue">Due</div>
            <div id="RDest1" class="deps rdest">Destination</div>
            <div id="REstimatedTimeOfDepartureComment1" class="deps rstatus">Status</div>
            <div id="RStand1" class="deps rplatform">Platform</div>
            <div id="RVias1" class="deps rvias">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mi
                erat, finibus id purus non, lobortis imperdiet elit. Praesent et felis rhoncus, maximus lectus eu,
                volutpat ante. Fusce consequat ultricies nunc. In non eros tortor. Integer ultrices eu metus vitae
                lobortis. Praesent pretium, tortor vitae efficitur pharetra, orci urna porta nibh, vel egestas neque
                quam in erat. Aliquam lorem mauris, semper a sollicitudin at, consectetur quis ligula. Sed quis tortor
                nec nisl pretium vehicula. Curabitur sed dui a erat malesuada efficitur.</div>
        </div>


    </div>