我有一個(gè)很長(zhǎng)的文本，我想顯示它的一部分，其余的可以通過(guò)單擊一個(gè)按鈕顯示更多(可能是字體aw esome箭頭向下圖標(biāo))和一個(gè)顯示更少(字體awesome箭頭向上圖標(biāo))與一些css動(dòng)畫(huà)。有可能得到幫助嗎？

html:

<div class="qodef-m-content" >
    <p class="qodef-m-text">
       Bonjour je suis Olfa une nana hypersensible marié et maman de deux enfants.
       En 2018 je quitte mon activité dans la finance qui ne colle pas avec mes valeurs et je commence une                   formation en naturopathie afin d’avoir des bases en médecines naturelles, très vite ma soif d’apprendre me dirige vers des techniques de massages corps, des thérapies brèves et des soins énergétiques.
 Ce parcours de plusieurs années me permet d’aider plusieurs femmes à se soigner physiquement et mentalement.
2021 je rencontre un soucis de santé qui me contraint à arrêter les massages par avis médical mais ma passion a raison de tout je décide? de me former dans un cursus RNCP sur les différents massages visages pour être Facialiste et en parallèle je passe mon dipl?me d’esthéticienne que j’obtiens.
Maintenant je prend plaisir a sublimer vos visages entre mes mains en mettant en pratiquant mon savoir-faire . 
   Je vous donne Rendez-vous m sur Aix en Provence pour découvrir mes soins signatures.
    </p>
</div>

css:

.qodef-m-text {
    font-family: "Cormorant Garamond", sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 33px;
    line-height: 42px;
    width: 80%;
    margin-left: 10%;
}

它不需要JavaScript。CSS是可選的自定義。 summary標(biāo)記將是顯示的部分，單擊它將打開(kāi)/關(guān)閉p元素。 我還為開(kāi)頭部分添加了一個(gè)動(dòng)畫(huà)。

details p{
  animation: anim 400ms;
  transform-origin: top;
}

@keyframes anim{
 from{
  transform: scale(1, 0);
  opacity: 0;
 }
 to{
  transform: scale(1, 1);
  opacity: 1;
 }
}

<h1>Hello world website</h1>

<details>
  <summary>Show the text</summary>
  <p>Bonjour je suis Olfa une nana hypersensible marié et maman de deux enfants.
       En 2018 je quitte mon activité dans la finance qui ne colle pas avec mes valeurs et je commence une                   formation en naturopathie afin d’avoir des bases en médecines naturelles, très vite ma soif d’apprendre me dirige vers des techniques de massages corps, des thérapies brèves et des soins énergétiques.
 Ce parcours de plusieurs années me permet d’aider plusieurs femmes à se soigner physiquement et mentalement.
2021 je rencontre un soucis de santé qui me contraint à arrêter les massages par avis médical mais ma passion a raison de tout je décide  de me former dans un cursus RNCP sur les différents massages visages pour être Facialiste et en parallèle je passe mon dipl?me d’esthéticienne que j’obtiens.
Maintenant je prend plaisir a sublimer vos visages entre mes mains en mettant en pratiquant mon savoir-faire . 
   Je vous donne Rendez-vous m sur Aix en Provence pour découvrir mes soins signatures.
</p>
</details>

首先，您需要在HTML文件中包含字體Awesome庫(kù)。您可以在HTML文件的head部分添加以下鏈接:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
        
<div class="qodef-m-content">
      <p class="qodef-m-text long-text">
        <!-- Your long text goes here -->
      </p>
      <button class="show-more-btn"><i class="fas fa-chevron-down"></i>Show More</button>
    </div>
    
    <style>
      .qodef-m-text {
        /* Your existing CSS styles */
        height: 200px; /* Set a fixed height for the initial display */
        overflow: hidden; /* Hide overflowing content */
        transition: height 0.3s ease; /* Add smooth animation on height change */
      }
    
      .qodef-m-content.collapsed .qodef-m-text {
        height: auto; /* Expand the height to show the full content */
      }
    
      .show-more-btn {
        /* Your button styling */
        display: block;
        margin-top: 10px;
        background: none;
        border: none;
        cursor: pointer;
      }
    </style>
    
    <script>
      const textContainer = document.querySelector('.qodef-m-text');
      const showMoreBtn = document.querySelector('.show-more-btn');
      const collapsedClass = 'collapsed';
    
      showMoreBtn.addEventListener('click', function() {
        textContainer.classList.toggle(collapsedClass);
        if (textContainer.classList.contains(collapsedClass)) {
          showMoreBtn.innerHTML = '<i class="fas fa-chevron-down"></i> Show More';
        } else {
          showMoreBtn.innerHTML = '<i class="fas fa-chevron-up"></i> Show Less';
        }
      });
    </script>

您可以使用JavaScript和CSS實(shí)現(xiàn)所需的功能。這里有一個(gè)例子，說(shuō)明如何用& quot顯示更多& quot單擊時(shí)展開(kāi)內(nèi)容的按鈕:

HTML:

<div class="qodef-m-content">
    <p class="qodef-m-text" id="qodef-m-text">
        Bonjour je suis Olfa une nana hypersensible marié et maman de deux enfants.
        En 2018 je quitte mon activité dans la finance qui ne colle pas avec mes valeurs et je commence une formation en naturopathie afin d’avoir des bases en médecines naturelles, très vite ma soif d’apprendre me dirige vers des techniques de massages corps, des thérapies brèves et des soins énergétiques.
        Ce parcours de plusieurs années me permet d’aider plusieurs femmes à se soigner physiquement et mentalement.
        2021 je rencontre un soucis de santé qui me contraint à arrêter les massages par avis médical mais ma passion a raison de tout je décide de me former dans un cursus RNCP sur les différents massages visages pour être Facialiste et en parallèle je passe mon dipl?me d’esthéticienne que j’obtiens.
        Maintenant je prend plaisir a sublimer vos visages entre mes mains en mettant en pratiquant mon savoir-faire.
        Je vous donne Rendez-vous m sur Aix en Provence pour découvrir mes soins signatures.
    </p>
    <button class="show-more" onclick="toggleText()">Show More</button>
</div>

CSS:

.qodef-m-text {
    font-family: "Cormorant Garamond", sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 33px;
    line-height: 42px;
    width: 80%;
    margin-left: 10%;
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.show-more {
    display: block;
    margin-top: 10px;
    background: none;
    border: none;
    color: blue;
    cursor: pointer;
}

JavaScript:

function toggleText() {
    var text = document.getElementById("qodef-m-text");
    var button = document.querySelector(".show-more");

    if (text.style.maxHeight) {
        // Text is expanded, so collapse it
        text.style.maxHeight = null;
        button.innerHTML = "Show More";
    } else {
        // Text is collapsed, so expand it
        text.style.maxHeight = text.scrollHeight + "px";
        button.innerHTML = "Show Less";
    }
}

這段代碼設(shè)置文本元素的最大高度，并隱藏任何溢出的內(nèi)容。單擊& quot顯示更多& quot按鈕觸發(fā)toggleText()函數(shù)，該函數(shù)根據(jù)文本的當(dāng)前狀態(tài)展開(kāi)或折疊文本。

您可以根據(jù)自己的喜好定制樣式和動(dòng)畫(huà)。此外，如果您想為& quot顯示更多& quot和& quot顯示較少& quot紐扣。