:first-line

將一或多種樣式套用至物件的第一行。

語法

:first-line { sRules }

可能的值

sRules

指定一或多個階層式樣式表屬性/值組的值。

備註

background、clear、color、font、font-family、font-size、font-style、font-variant、font-weight、line-height、text-decoration、text-transform、vertical-align 及 word-spacing 屬性適用於 :first-line 虛擬元素。

第一行的長度取決於多種因素，例如網頁寬度與字型大小。

:first-line 虛擬元素可附加至區塊層級元素。如果將對應的 display 屬性設為 block，則可附加至內嵌元素。

範例

下列範例顯示如何使用 :first-line 虛擬元素。

下列規則以指定的 className 屬性將元素第一行的字母變更為大寫。

<style>
    .CapFirst:first-line {text-transform: uppercase}
</style>

<p class="CapFirst">The first line in this paragraph will be in 
all uppercase letters. Subsequent lines will render normally.</p>

下列規則說明將 :first-line 與 :first-letter 虛擬元素附加至元素的累積效應：

<style>
    .LetterAndline:first-line   {text-transform: uppercase}
    .LetterAndline:first-letter {font-size: 200%; float: left}
</style>

<p class="LetterAndline">The first letter in this paragraph will 
be twice the size of the other letters in the paragraph.  The 
first line in this paragraph will have uppercase letters.   
Subsequent lines will render normally.</p>

下列範例使用 :first-line 虛擬元素來製作與報紙專欄類似的印刷效果：

<style>
    .col1 {border-right: black 1px solid; 
        padding-right: 10px; 
        padding-left: 5px; 
        width: 140px;
        text-justify: newspaper
        }
    .newsitem:first-line {font-size: 14pt; 
        left: 0px; 
        float: left; 
        position: absolute; 
        top: 100px
       }
</style>

<div class="col1">
<div class="newsitem">New features in Internet Explorer 5.5 include 
the first-line pseudo-element. This allows authors to create
typographical effects that are applied to the first line of a block 
of text.</div>
</div>

標準資訊

此虛擬元素是在階層式樣式表 (CSS) 層級 1 (CSS1) (英文) 中定義。

適用於

ADDRESS、BLOCKQUOTE、BODY、CENTER、DD、DIV、DL、DT、FIELDSET、FORM、HN、LI、P、XMP

請參閱

概念

:first-letter

display