Javascript 如何为一个对象显示一行部分单词，将鼠标指针移到文本字段上显示全文

显示部分内容的页面（页面在框中确实有展开或关闭功能），现在我想显示这些内容的部分标题，页面的pic和list.html如下

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

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

#第1栏、第2栏、第3栏、第4栏、第5栏、第6栏{填充：12px；边框：0px纯绿色；}
.折叠内容{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.扩展内容{
显示：块；
}
p{
显示：inine块；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
最大宽度：100px；
}
p:悬停{
溢出：可见；
}
函数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（“扩展内容”）；
targetObj.classList.toggle（“折叠内容”）；
if（targetObj.classList.contains（“折叠内容”））{
sourceObj.innerHTML=oShutTip；
}否则{
sourceObj.innerHTML=oOpenTip；
}
}
学过的课程列表
{课程%中的c为%1}

{%endfor%}
点击展开

我没有看到任何绿色文本。假设您的粗体文本在不悬停时需要截断，您只需要css即可：

.card header.col-10{
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
}
.卡头。第10列：悬停{
溢出：初始值；
空白：首字母；
文本溢出：首字母；
}

中文文本中文文本中文文本中文文本中文文本中文文本中文文本中文文本中文文本中文文本中文文本中文文本中文文本中文文本中文文本中文文本中文文本中文文本
{课程%中的c为%1}
{%endfor%}
点击展开

好，那么另一个答案是什么

假设

p{
显示：inine块；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
最大宽度：100px；
}
p:悬停{
溢出：可见；
}

QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ

告诉我给出的答案是否符合您的要求HI，红色框中的长绿色单词是内容的标题，每个标题都太长，无法阅读，因此我希望将它们显示为一个对象的一行，将鼠标指针移动到文本字段上将显示全文。我需要javascript吗？我想它需要鼠标指针功能？嗨，我在这里贴了一个演示，你能帮我复习一下吗？非常感谢您好，如果我将鼠标指针移到文本字段上，它会显示全文吗？是的，请使用“运行代码片段”按钮进行检查。再次感谢您的耐心，因为页面框中已经有展开或关闭功能，如果我使用您编写的上述代码，则框的展开或关闭功能将失败（它以前工作得很好），关于新功能，将鼠标指针移到文本字段上不会显示全文，它会显示部分标题，而不是全部标题，我们的标题是longHi@AshAR，真的需要您的帮助，非常感谢，您的代码在这里工作得很好，我更新了我的问题和代码，这些代码需要放到另一个已经有了新版本的类中或者关闭框中的函数，我不能让它们都工作……嗨，我在这里贴了一个演示，你能帮我复习一下吗？非常感谢

<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>