文本自适应某宽度超出后实现翻页

最新推荐文章于 2022-12-26 10:36:37 发布

zp_love666

最新推荐文章于 2022-12-26 10:36:37 发布

阅读量394

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/zp_love666/article/details/102860635

版权

本文探讨如何在文本宽度超出指定限制时，通过翻页技术进行内容展示。讲解了关键技术和实现步骤，帮助读者理解如何优雅地处理长文本显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <style type="text/css">
    .tabs {
        width: 100%;
        border-bottom: 1px solid #20eeff;
        height: 50px;
        overflow: hidden;
    }

    .tabs-lines {
        width: auto;
        margin: auto;
        position: relative;
        height: 100%;
        white-space: nowrap;
        overflow: visible;
    }

    .tab-item {
        cursor: pointer;
        display: inline-block;
        height: 50px;
        margin-right: 20px;
        text-align: center;
        color: #333;
        font-size: 16px;
    }

    .tab-wrap {
        display: inline-block;
        width: 90%;
        margin-left: 20px;
        line-height: 50px;
        height: 50px;
        position: relative;
        overflow: hidden;
    }

    .tab-button {
        display: inline-block;
        background: transparent;
        border: none;
        width: 40px;
        height: 50px;
        line-height: 50px;
        color: #ccc;
        cursor: pointer;
        vertical-align: top;
        outline: none;
        cursor: not-allowed;
    }

    .tab-button-active {
        color: #20eeff;
        cursor: pointer;
    }

    .tab-checked {
        color: #20eeff;
        border-bottom: 6px solid #1DA9C5;
    }

    .tab-item span {
        display: inline-block;
    }

    .tab-content {
        margin-top: 20px;
    }
    </style>
</head>

<body>
    <div class="tabs">
        <div class="tab-wrap">
            <div class="tabs-lines">
            </div>
        </div>
        <button id="left" class="tab-button">
            <span class="glyphicon glyphicon glyphicon-triangle-left"></span>