Question

我需要在HTML中的两个空元素之间创建一条垂直线。锚点之间的元素和文本应渲染。垂直线应显示在文本的左侧，并且不影响其样式，甚至不中断其样式。

我的HTML代码基本上类似于下面的代码段。有一些跨度可以用作锚定元素，例如<span id="start_line-1"/>和<span id="end_line-1"/>标记垂直线必须在哪里开始和在哪里结束。这些行可以跨越多个段落，并且与元素的层次结构不相关。任何想法如何做到这一点在jQuery或JavaScript？

  <div>
        <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br /> sed diam nonumy eirmod
                tempor invidunt ut labore<span id="start_line-1"/> et dolore magna aliquyam
                erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                Stet clita kasd gubergren, no sea takimata sanctus est<br /> Lorem ipsum dolor sit
                amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
                eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br /> sed diam nonumy eirmod
                tempor invidunt ut labore<span id="end_line-1"/> et dolore magna aliquyam
                erat, sed diam voluptua. 
        </p>
        <span id="start_line-2"/>
        <span>At vero eos et accusam et justo duo dolores et ea rebum. Stet<br /> clita kasd
                gubergren, no sea takimata sanctus est<br /> Lorem ipsum dolor sit amet.</span>
        <span id="end_line-2"/>
  </div>

Answer 1

无需在<div>标记内使用<p>，就可以实现所需的功能。

.vertical-line {
    border-left: 4px solid red;
    height: auto;
    padding-left: 5px;
}

.transparent {
	border-left: 4px solid transparent;
}

<div class="vertical-line transparent">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
</div>
<div class="vertical-line">
  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est<br /> 
  Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
  no sea takimata sanctus est Lorem ipsum dolor sit amet.
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br /> 
  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed 
</div>
<div class="vertical-line transparent">
  diam voluptua.
</div>
<div class="vertical-line">
  At vero eos et accusam et justo duo dolores et ea rebum. Stet<br /> 
  clita kasd gubergren, no sea takimata sanctus est<br /> 
  Lorem ipsum dolor sit amet.
</div>

Answer 2

根据我对您的问题的理解，以下是您所需要的。如果只希望段落的特定部分具有垂直线，则将其括在如下所示的范围内。继续并运行代码，

span.container:before {
  content: "";
  background-color: red;
  position: absolute;
  width: 5px;
  left:0;
  height: 100%;
}

span.container {
  position: relative;
  padding-left:10px;
  display:block;
}

div.main {
  padding-left:10px;
}

    <div class="main">
   <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br /> sed diam nonumy eirmod
      tempor invidunt ut labore
   <span class="container">
      et dolore magna aliquyam
      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est<br /> Lorem ipsum dolor sit
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
      no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
      <p>
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br /> sed diam nonumy eirmod
         tempor invidunt ut labore
   </span>
   et dolore magna aliquyam
   erat, sed diam voluptua. 
   </p>
   <span class="container">
      <span>At vero eos et accusam et justo duo dolores et ea rebum. Stet<br /> clita kasd
      gubergren, no sea takimata sanctus est<br /> Lorem ipsum dolor sit amet.</span>
   </span>
</div>

您可以将内容包含在容器中，而不是用跨度标记开始/结束（我不知道是否可以用这些跨度来完成垂直线）。

Answer 3

.obj .obj1 {
  position: relative;
  border-left: 4px solid red;
  padding-left: 5px;
  display: flex;
  width: 50%;
  flex-wrap: wrap;
}

<div class='obj'>

  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br /> sed diam nonumy eirmod tempor invidunt ut labore<span id="start_line-1" /> et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
    clita kasd gubergren, no sea takimata sanctus est<br /> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br /> sed diam nonumy eirmod tempor invidunt ut labore<span id="end_line-1" /> et dolore magna aliquyam erat, sed diam voluptua. </p>


  <span class='obj1'>At vero eos et accusam et justo duo dolores et ea rebum. Stet<br /> clita kasd
                gubergren, no sea takimata sanctus est<br /> Lorem ipsum dolor sit amet.</span>

</div>

您可以如上所述使用CSS。

Answer 4

也许您可以尝试使用HTML实体，例如-并使用CSS对其进行旋转。变换：旋转（90deg）

两个锚点元素之间的垂直线

4 个答案: