Wrap text using CSS for a button to display code with javascript interaction
Question
I'm trying to set a drop-down menu to display HTML code. Everything is working perfectly except that longer sections of code do not wrap or break onto the next line. The result is that the user can not see longer strands of code. I've inserted Lorem Ipsum as an example.
I have tried MANY inline styles on the code element and the containing div element. This div contains other styling for the text (such as color) with no problem.
I've tried width, overflow, word-break, and a number of other things. I'm out of ideas.
<,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>
2 answers
solution1
1 ACCPTED 2021-05-06 17:58:28
Have you tried different values for white-space on the code and parent pre element? Seems to fix it right up for me.
solution2
0 2021-05-06 18:10:30
There were a couple issues with the code tag that I fixed but also a few with various margins and padding that seemed to be off. Here's an update that should work. `
<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>
`
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.