javascript - 具有 "show/hide"功能的 2 列布局，文本渗入第二列。

Question

我是新来的，绝不是专业的网络开发人员，所以如果我遗漏了一些明显的东西，我深表歉意。

我正在尝试创建一个两列布局，每个布局都具有“显示/隐藏”功能以显示摘要。但是，当我单击“显示”时，文本会渗入下一列。我的代码如下所示:

 <div id="content" class="clearfix" style="margin:0px auto; width:70%">
    <h2>Session 1</h2>
      <div id="column1" style="float:left; margin:0; width:50%;"><span class="content">
        <p><strong><span lang="EN-US" xml:lang="EN-US">Panel 2A:</span></strong><span lang="EN-US" xml:lang="EN-US"> <strong><em>Visual arts</em></strong></span></p>
        <p><b>Sp. 1 NAME</b> - <br />
          &lsquo;PAPER NAME&rsquo;<br />
          <a href="#" id="show_abstract_1" onClick="InsertContent('abstract_1');InsertContent('hide_abstract_1');RemoveContent('show_abstract_1');return false;">view abstract</a><a href="#" id="hide_abstract_1" onClick="RemoveContent('abstract_1');InsertContent('show_abstract_1');RemoveContent('hide_abstract_1');return false;" style="display:none;">hide abstract</a>
          <span id="abstract_1" style="color:#312B85;display:none;"><br />TESTTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</span></p>
    </div>

<div id="column3" style="float:left; margin:0;width:50%"><span class="content">
  <p><strong><span lang="EN-US" xml:lang="EN-US">Panel 2B:</span></strong><span lang="EN-US" xml:lang="EN-US"> <strong><em>Architecture and applied arts</em></strong></span></p>
  <p align="left"><strong>Sp. 5 NAME</strong><br />
    &lsquo;PAPER NAME&rsquo;<br />
    <a href="#" id="show_abstract_2" onClick="InsertContent('abstract_2');InsertContent('hide_abstract_2');RemoveContent('show_abstract_2');return false;">view abstract</a><a href="#" id="hide_abstract_2" onClick="RemoveContent('abstract_2');InsertContent('show_abstract_2');RemoveContent('hide_abstract_2');return false;" style="display:none;">hide abstract</a>
    <span id="abstract_2" style="color:#312B85;display:none;"><br />
   TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</span></p>
</div>

此代码为 jsFiddled here

如有任何帮助建议，我们将不胜感激。已经坚持了几个小时。

Answer 1

您的文本:TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest 不合常理。您应该考虑有空格的“lorem ipsum”测试文本。

对于您的上下文，您可以尝试“溢出:隐藏”和/或“文本溢出:省略号”