使用CSS設置標題樣式

Question

我有一個頁面在其中顯示如下子標題樣式：

看起來很不錯，直到要顯示的文本超過一行為止，如下所示：

我想得到的是：

也就是說，左側裝飾性橙色矩形的高度應根據文本的高度而變化。

因為我們要求裝飾矩形可以是任何顏色，所以不能使用圖像來完成。 這是我們當前渲染的：

<div class="header">
<div class="decor">&nbsp;</div>
<h3>Text goes here</h3>
</div>

有沒有一種方法可以使用CSS設置樣式以獲得所需的外觀？ 我也很高興更改使用的HTML。 我的限制是：

1. 我們必須可以通過CSS將矩形設置為任何顏色。
2. 標題文本可能會有所不同，因此我們無法通過其ID將特定的硬編碼高度應用於特定的標題，它需要自動工作。

Answer 1

演示

的CSS

h3{
    border-left:5px solid #F1592A;
     background-color:#EEEEEE;
    padding:2px;

}

Answer 2

我不建議使用  樣式（並保持空間樣式）。

填充用於創建內部元素間距。 這就是您所需要的。

嘗試添加以下CSS樣式：

h3 {
   padding-left: 10px; /* You can change this number */
}

您可以通過添加邊框來創建左側的“裝飾”：

h3 {
   padding-left: 10px; /* You can change this number */
   border-left: 3px solid orange; /* You can change the color and width */
}

Answer 3

您可以執行以下操作： http://jsfiddle.net/5SaCt/ 。 將左邊框設置為所需的任何顏色。 的HTML

<div id="content">
    1,2,3,4 <br/>
    5,6,7,8
</div>

的CSS

#content {
    border-left:5px solid orange;
    padding:5px;
    width:500px;
    height:auto;
}

輸出：