使用 CSS 换行文本作为按钮显示代码与 javascript 交互
[英]Wrap text using CSS for a button to display code with javascript interaction
问题描述
I'm trying to set a drop-down menu to display HTML code.
我正在尝试设置一个下拉菜单来显示 HTML 代码。 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.我已插入 Lorem Ipsum 作为示例。
I have tried MANY inline styles on the code element and the containing div element.我在代码元素和包含的div元素上尝试了许多内联 styles。 This div contains other styling for the text (such as color) with no problem.此div包含文本的其他样式（例如颜色），没有问题。
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 个解决方案
解决方案1
1 已采纳 2021-05-06 17:58:28
Have you tried different values for white-space on the code and parent pre element?您是否在代码和父前置元素上尝试过不同的white-space值？ Seems to fix it right up for me.似乎可以为我解决它。
解决方案2
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>
` `
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.