使用 CSS 为按钮换行文本以显示具有 javascript 交互的代码

Question

我正在尝试设置一个下拉菜单来显示 HTML 代码。除了较长的代码部分不会换行或中断到下一行外，一切都运行良好。结果是用户看不到更长的代码链。我插入了 Lorem Ipsum 作为示例。

我在 code 元素和包含的 div 元素上尝试了许多内联样式。 div 包含文本的其他样式（例如颜色）没有问题。

我试过宽度、溢出、断字和许多其他方法。我没主意了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .accordion {
            background-color: rgb(66, 66, 66);
            color: rgb(245, 245, 245);
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: center;
            border: none;
            outline: none;
            transition: 0.4s;
            width: 400px;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            font-size:larger;
        }

        .active, .accordion:hover {
            background-color: rgb(20, 20, 20);
        }

        .panel {
            padding: 0 18px;
            background-color: white;
            display: none;
            overflow: hidden;
        }

        nav {
            background-color: gray;
            padding: 18px;
            margin: 0px;
            border: 0px;
            width: 100%;
            text-align: center;
            border: none;
            outline: none;
            transition: 0.4s;
        }

        a {
            padding: 3%;
            color: white;
            font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size:larger;
        }

        body {
            margin: 0px;
        }
    </style>
</head>

<body>
    <nav>
        <a href="index.html">Home</a>
        <a href="index.html">Student 1</a>
        <a href="www.yahoo.com">Student 2</a>
        <a href="www.yahoo.com">Student 3</a>
        <a href="www.yahoo.com">Student 4</a>
        <a href="www.yahoo.com">Student 5</a>
    </nav>

    <button class="accordion">Click here to see the code I wrote!</button>
        <div class="panel" style="color: limegreen; background-color: rgb(20, 20, 20);">
            <figure>
                <pre>
                    <code>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora reprehenderit quod dolore totam a alias quibusdam, consectetur rerum saepe, doloribus asperiores quo nam aut est mollitia quia non similique quam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor vel ipsam esse reprehenderit laborum? Corrupti, labore inventore laudantium officiis eveniet commodi porro ullam hic obcaecati asperiores suscipit, saepe quia eaque.
                    </code>
                </pre>
            </figure>
        </div>
    
    <script>
        var acc = document.getElementsByClassName("accordion");
        var i;
    
        for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function() {
            this.classList.toggle("active");
    
    
            var panel = this.nextElementSibling;
        
            if (panel.style.display === "block") {
                panel.style.display = "none";
                } else {
                panel.style.display = "block";
                }
            });
        }
    </script>


</body>
</html>

Answer 1

您是否尝试过在代码和父元素上为 white-space 设置不同的值？似乎为我解决了这个问题。

Answer 2

我修复了代码标签的几个问题，但也有一些不同的边距和填充似乎已关闭。这是一个应该有效的更新。 `

<style>
    .accordion {
        background-color: rgb(66, 66, 66);
        color: rgb(245, 245, 245);
        cursor: pointer;
        padding: 14px;
        width: 100%;
        text-align: center;
        border: none;
        outline: none;
        transition: 0.4s;
        width: 400px;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size:small;
    }

    .active, .accordion:hover {
        background-color: rgb(20, 20, 20);
    }

    .panel {
        padding: 0 18px;
        background-color: white;
        display: none;
        overflow: hidden;
    }

    nav {
        background-color: gray;
        padding: 14px 0px;
        margin: 0px;
        border: 0px;
        width: 100%;
        text-align: center;
        border: none;
        outline: none;
        transition: 0.4s;
    }

    .pre{
        width: 100%;
    }

    code{
        display: inline-block;
        white-space: normal;
        max-width:80%; 
        word-break:break-all; 
        word-wrap:break-word;
    }

    a {
        padding: 3%;
        color: white;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size:medium
    }

    body {
        margin: 0px;
        width: 100%;
    }
</style>

`

使用 CSS 为按钮换行文本以显示具有 javascript 交互的代码

Wrap text using CSS for a button to display code with javascript interaction

javascript

html

css

text

word-wrap