使用 CSS 換行文本作為按鈕顯示代碼與 javascript 交互

Question

我正在嘗試設置一個下拉菜單來顯示 HTML 代碼。 除了較長的代碼部分不會換行或中斷到下一行之外，一切都運行良好。 結果是用戶看不到更長的代碼鏈。 我已插入 Lorem Ipsum 作為示例。

我在代碼元素和包含的div元素上嘗試了許多內聯 styles。 此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 交互

問題描述

2 個解決方案

解決方案1
1 已采納 2021-05-06 17:58:28

解決方案2
0 2021-05-06 18:10:30

使用 CSS 換行文本作為按鈕顯示代碼與 javascript 交互

問題描述

2 個解決方案

解決方案1 1 已采納 2021-05-06 17:58:28

解決方案2 0 2021-05-06 18:10:30

解決方案1
1 已采納 2021-05-06 17:58:28

解決方案2
0 2021-05-06 18:10:30