SOURCE

//通过Range对象精准获取文本的范围，再通过getClientRects()方法得到每一行文本的矩形区域，矩形区域的数量就对应着文本行数
const textDoms = document.querySelectorAll('.verical-collapse-text')
const range = document.createRange();
range.selectNodeContents(textDoms[0])
console.log("通过Range对象获取文本行数：", range.getClientRects().length)

//横向滚动
startScroll()
function startScroll() {
    if(range.getClientRects().length > 1){
        textDoms[0].style.textOverflow = 'unset'
        textDoms[0].style.overflow = 'unset'
        textDoms[0].style.animation = 'scroll 10s linear infinite'
    }
    requestAnimationFrame(startScroll)
}

//纵向展开
const arrowDom = document.querySelector('.arrow')
arrowDom.addEventListener('click', () => {
    textDoms[1].style.textOverflow = 'unset'
    textDoms[1].style.overflow = 'unset'
    textDoms[1].style.whiteSpace = 'unset'
    arrowDom.style.display = 'none'
})

//纵向滚动
const scrollItem = document.getElementById('scroll-item');
let scrollPosition = 0;
const scrollSpeed = 0.3;

function scrollText() {
    scrollPosition += scrollSpeed;
    scrollItem.scrollTop = scrollPosition;
    if (scrollPosition >= scrollItem.scrollHeight - scrollItem.clientHeight) {
        scrollPosition = 0;
    }
    requestAnimationFrame(scrollText);
}

scrollText();

<div class="contain">
    <div class="row">
        <div class="row-item verical-collapse">
            <div class="verical-collapse-text">横向超长文本，单播-哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇</div>
        </div>
        <div class="row-item row verical-collapse">
            <div class='verical-collapse-text'>纵向超长文本-2哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇</div>
            <div class="arrow">></div>
        </div>
    </div>


    <div class="flex-container">
        <div class="flex-item" id="scroll-item">
            <p>这是一段超长的文字，用于在 Flex 布局下演示垂直滚动效果。这是一段超长的文字，用于在 Flex 布局下演示垂直滚动效果。这是一段超长的文字，用于在 Flex 布局下演示垂直滚动效果。</p>
        </div>
    </div>
</div>

.contain{
    background: #fff;
    width: 600px;
    height: 1000px;
    overflow: hidden;
    border-radius: 20px;
    padding: 20px 30px;
}

.row{
    display: flex;
    align-items: center
}

.row-item:first-child{
    margin-right: 20px; 
}

.verical-collapse{
    background: #2d2d2d;
    overflow: hidden;
    color:#fff;
    padding: 10px;
    border-radius: 6px;
}

.verical-collapse-text{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; 
}

/* 父容器采用 Flex 布局 */
.flex-container {
    display: flex;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 6px;
    width: 400px;
    height: 50px;
    margin-top: 50px;
}

/* 子元素样式 */
.flex-item {
    flex: 1;
    overflow: hidden;
}

@keyframes scroll{
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(-100%)
    }
}

.arrow{
    transform: rotate(90deg);
    cursor: pointer;
    flex-shrink: 0;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
}