如何在多行文本之间显示垂直线

Question

如何在单行和多行文本之间显示垂直线，如图所示。

Answer 1

border-left属性应解决此问题。只需将你的行包裹在div中。

＆＃13;

＆＃13;

div {
  border-left: 1px solid black;
  padding-left: 10px;
}

＆＃13;

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将它们放入包含border-left: 1px solid black;

的包装中

JSFiddle：http://jsfiddle.net/1ofvajLa/

Answer 3

您可以显示以下垂直线：

＆＃13;

＆＃13;

.test {
    display: table-cell;
    padding: 0 5px;
    vertical-align: middle;
}
.test:last-child{
  border-left:1px solid;
}

＆＃13;

<div>
 <div class="test">
  <p>Bar</p>
 </div>
 <div class="test">
  <p>Text 1</p>
  <p>Text 2</p>
  <p>Text 3</p>
 </div>
</div>

＆＃13;

＆＃13;

＆＃13;

<强> Working Fiddle