如何将两个段落连接在一起以内联方式显示，而不会使文本移动

How can I Join two paragraphs to display inline together without jusitified text moving around?

本文关键字：显示 方式 移动 文本 在一起 连接 段落 两个      更新时间：2023-09-26

我正在尝试将两个段落连接在一起以内联显示。我知道我可以使用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>

谢谢！

我不知道你的设计是什么样子的，但如果你的第二段只是需要出现，你可以用几种方法：

  1. 在第二段中添加一个类，以内联方式显示，但将其设置为与背景颜色相同。然后，使用jQuery事件将颜色调整为文本颜色。问题是谷歌会反对这些恶作剧。

  2. 您也可以调整第二段的不透明度，而不是使用display:none。

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

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

.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');  
  });        
});
相关文章：