如何在多行文本之間顯示垂直線

Question

如何在圖像中顯示的單行和多行文本之間顯示垂直線。

Answer 1

的border-left屬性應該解決這個問題。只需將你的行包裹在div中即可。

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

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

Answer 2

通過把它們放在一個包裝與border-left: 1px solid black;

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

Answer 3

可以顯示垂直線像下面：

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

<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>

Working Fiddle