如何根據內容調整手風琴文字大小

Question

我正在嘗試解析一個大文本文件並使用手風琴文本效果顯示所有文本。 這是結果：

正如你所看到的，使用小文本就可以了，沒問題，但是文字太大......它無法正常工作。

如何添加滾動效果或使框更大以便正確顯示所有文本內容？

jsfiddle： https ：//jsfiddle.net/jbfz09Ln/

編碼：

HTML：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/accordion.css" type="text/css" media="screen">

</head>
<body>
    <!--Añadimos al area principal el efecto acordeon con el texto -->
    <section class="mainArea" align="center">
            <button class="accordion">Boot and Services</button>
            <div id="placeholder" class="panelacc"></div>


    </section>

<script>


/* nos permite gestionar los eventos para el texto en forma de acordeon */
var acc = document.getElementsByClassName("accordion");
for (var j = 0; j < acc.length; j++) {
    acc[j].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}



</script>
</body>
</html>

accordion.css：

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
}

div.panelacc {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panelacc.show {
    opacity: 1;
    max-height: 500px;  
}

div.panelacc.show p {
  color: black;
}

Answer 1

我添加了一些css代碼。 這是你想要的嗎？

class div.panelacc：

border:solid 1px green;
overflow-y:scroll;
overflow-x:hidden;
//max-width:200px;  // set max width

class.mainArea：

height:100%;

class div.panelacc.show：

max-height: 100%;

簡單的例子： https ： //jsfiddle.net/jbfz09Ln/4/

Answer 2

根據你的代碼，你做錯了兩件事：

.mainArea{
  height:300px; /* REMOVE this one */
  border: 1px solid red;
}

/* AND */

div.panelacc.show {
    opacity: 1;
    max-height: 500px;  /* HERE you are setting a fix height */
}

解決方案：移除height:300px; 行和改變500px到100%像這樣的max-height: 100%;

檢查你的代碼我已經更新了它

如何根據內容調整手風琴文字大小

問題描述

2 個解決方案

解決方案1
0 2016-05-08 14:18:37

解決方案2
0 2016-05-08 15:31:30

如何根據內容調整手風琴文字大小

問題描述

2 個解決方案

解決方案1 0 2016-05-08 14:18:37

解決方案2 0 2016-05-08 15:31:30

解決方案1
0 2016-05-08 14:18:37

解決方案2
0 2016-05-08 15:31:30