1

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

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

 <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

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

4

1 回答 1

2

您的文字： TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest 超出常识。你应该考虑一个'lorem ipsum'测试文本女巫有空格可以打破。

对于您的上下文，您可以尝试 'overflow:hidden' 和/或 'text-overflow:ellipsis'

于 2013-05-31T12:55:10.953 回答