如何在html / JS的展开或关闭内容类中为一个对象的一行显示部分单词-2个隐藏和省略号

Question

页面已经显示了unfold or close the remaining content in html/JS by this link的部分内容（页面alreay在框中具有展开或关闭功能），现在我想在展开或关闭的框中显示这些内容的部分标题，因此我们具有2种隐藏功能，一种显示部分内容，一种显示部分标题，页面的pic和list.html。

红色方框中的绿色长字是内容的标题，每个标题都太长而无法阅读，因此我想为一个对象显示一行，并且将鼠标指针移到文本字段上将显示全文。

如果我使用以下代码，则展开或关闭框的功能将失败，并且将鼠标指针移到文本字段上不会显示全文，而不是全文。

<style type="text/css">
#box1,#box2,#box3,#box4,#box5,#box6{padding:12px;border:0px solid green;}
.collapsed-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.expanded-content {
  display: block;
}

p{
display:inine-block;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
max-width: 100px;

}

p:hover{
overflow:visible;
}

</style>
<script type="text/javascript">
function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;

  //targetObj.classList.toggle("expanded-content");
  targetObj.classList.toggle("collapsed-content");
  if(targetObj.classList.contains("collapsed-content")){
    sourceObj.innerHTML = oShutTip;
  } else {
    sourceObj.innerHTML = oOpenTip;
  }
}
</script>


  <div class="card">
    <div class="card-header">
      <div class="row">
        <div class="col-10">
          <strong>学过的课程列表</strong>
        </div>
      </div>
    </div>
   <div class="list-group list-group-flush list-group-formset">
      <div class="col-10 collapsed-content" id="box3" style="word-break: break-all;">
      {% for c in course %}
      <p class="hide"><a href="{% url 'supervisors:course_change' c.pk %}">{{ c }}</p></a>
      &nbsp;&nbsp;&nbsp;
      {% endfor %}
      </div>
    </div>
    <div><button onclick="openShutManager(this,'box3',false,'点击关闭','点击展开')">点击展开</button></div>
      <div class="card-footer">
       </div>
  </div>