Question

页面通过unfold or close the remaining content in html/JS by this link显示了部分内容（页面序列在框中具有展开或关闭功能），现在我想显示页面中框，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>

Answer 1

我没有看到绿色文字。假设不悬停时您的粗体文本需要被截断，那么您只需要使用CSS：

.card-header .col-10 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.card-header .col-10:hover {
    overflow: initial;
    white-space: initial;
    text-overflow: initial;
}

<div class="card">
    <div class="card-header">
      <div class="row">
        <div class="col-10">
          <strong>chinese text chinese text chinese text chinese text chinese text chinese text chinese text chinese text chinese text chinese text chinese text chinese text chinese text </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 %}
      <a href="{% url 'supervisors:course_change' c.pk %}">{{ c }}</a>
      &nbsp;&nbsp;&nbsp;
      {% endfor %}
      </div>
    </div>
    <div><button onclick="openShutManager(this,'box3',false,'点击关闭','点击展开')">点击展开</button></div>
      <div class="card-footer">
       </div>
  </div>

Answer 2

好的，所以另一个答案

假设

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

<html>
<head>
</head>
<body>

<div class="hide">
<p>qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p>
</div>

</body>
</html>

您可以相应地设置最大宽度以显示一行我希望这行得通

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

2 个答案: