Question

我有一个标题和一个文本块。我希望使用css属性page-break-inner: avoid的标题和前三个句子避免分页符。然后，我希望其余的句子像往常一样继续。

我编写了以下代码，但是前3个句子之后的句子从新行开始，因为我将包含标题和前三个句子的范围设置为display: inline-block。我将跨度设置为display: inline，但我读到某处page-break-inside在行内元素上不起作用。

.avoid-break {
  page-break-inside: avoid;
}

span.avoid-break {
  display: inline-block;
}

<span class="avoid-break">
  <div>Subtite</div>
  <span>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
  </span>
</span>
<span>
  This should continue on the line above! It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span>

Answer 1

一个CSS解决方案：

remove span.avaoid-break

这是非常特定于显示的代码，我不会在生产环境中使用它。

var spans = document.getElementsByTagName('span');
spans[1].innerHTML += spans[2].innerHTML
spans[2].remove()

ID将使它更加有用：

<span class="avoid-break">
  <div>Subtite</div>
  <span id="text-box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
  </span>
</span>
<span id="extra-text">
  This should continue on the line above! It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span>

Javascript：

var textbox = document.getElementById('text-box');
var extratext = document.getElementById('extra-text');
textbox.innerHTML += extratext.innerHTML;
extratext.remove()

避免使用CSS破坏标题和文本的前几个句子

1 个答案: