Question

我正在尝试将两个段落连接在一起以显示内联。我知道我可以使用span标签而不是p标签，但我的问题是这个。我希望文本在两个段落中都是合理的。我想设置第二段显示：none（隐藏）开始。使用jQuery我将切换display：none以显示第二段中的隐藏文本。我不希望第一段的最后一行上的文字在第二段被揭示时开始移动。这是我被困的地方。我可以将这些段落加在一起，但是我正在最后一行文本中进行移动，因为我在第一段中的最后一行添加了新文本。它重新证明了最后一行文字。发生这种情况时效果不佳。

请记住，第二段中的文字将在第一段结尾处继续，不会换行。

$(function() {
  $('span[id=span2]').addClass('hidepar');
  $('span[id=span1]').click(function() {
    $('span[id=span2]').fadeToggle(1000);
  });
});

.hidepar {
  display: none;
}
#div1 {
  text-align: justify;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <span id="span1" style="display:inline">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</span>
  <span id="span2">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</span>
</div>

谢谢！

Answer 1

我不知道你的设计是什么样的，但是如果你的第二段看起来似乎需要出现，你可以通过以下几种方式解决这个问题：

在第二段中添加一个类，将其显示为内联，但将其设置为与背景颜色相同。然后，使用jQuery事件将颜色调整为文本颜色。问题是谷歌会对这些诡计感到不满。
您还可以调整第二段的不透明度，而不是使用display：none。

这假设没有其他页面元素会受到影响。只是两个想法。

Answer 2

也许您可以将代码更改为：

.hidepar {
visibility: hidden;
}
#div1 {
text-align: justify;
}

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('span[id=span2]').addClass('hidepar');
$('span[id=span1]').click(function() {
$('span[id=span2]').css('visibility', 'visible');  
  });        
});

如何在没有合理的文本移动的情况下将两个段落连接在一起显示内联？

2 个答案: