CSS文字效果

上一頁
下一頁

CSS文字效果用於透過設定溢位規則、換行規則、斷行規則和文字書寫模式來管理文字樣式。文字效果允許我們對HTML文件中使用的文字應用不同型別的效果。在本教程中，我們將學習如何在CSS中向文字新增效果。

目錄

什麼是CSS中的文字效果？

以下是CSS中常用的文字效果。

  1. text-overflow: 指定如何管理溢位容器的文字。
  2. word-wrap: 指定是否換行過長的溢位容器的單詞。
  3. word-break: 指定當文字溢位容器時是否斷開由連字元分隔的單詞。
  4. writing-mode: 指定文字的水平和垂直書寫模式。

我們將在接下來的章節中看到所有這些屬性的示例。CSS中還有許多其他與文字相關的屬性，我們在CSS文字樣式教程中已經介紹了所有這些屬性。

文字溢位屬性

text-overflow 屬性用於控制超過父元素寬度的文字。您可以裁剪超過父元素寬度的文字，也可以新增省略號(...) 來指示文字的繼續。

p{
    text-overflow: clip | ellipsis;
}

讓我們來看一個例子。

示例

<html>
<head>
    <style>
        p{
            white-space: nowrap; 
            border: 2px solid;
            width: 40%; 
            overflow: hidden;
            padding: 2%;
        }
    </style>
</head>

<body>
    <h3> Text overflow clip </h3>
    <p style="text-overflow: clip;"> 
        This is some large amount of text to understand text 
        overflow property
    </p>

    <h3> Text overflow ellipsis </h3>
    <p style="text-overflow: ellipsis;"> 
        This is some large amount of text to understand text 
        overflow property 
    </p>
</body>
</html>

自動換行屬性

word-wrap 屬性用於允許將長單詞斷開並換行到下一行。這確保內容適合其容器，防止溢位。

p{
    word-wrap: normal | break-word;
}

讓我們來看一個例子。

示例

<html>
<head>
    <style>
        p{
            border: 2px solid;
            width: 40%; 
            padding: 2%;
        }
    </style>
</head>

<body>
    <h3> Word wrap normal </h3>
    <p style="word-wrap: normal;"> 
        ThisIsAVeryLongWordThatWillNotBreakAndWillOverflowItsContainer 
    </p>

    <h3> Word wrap break-word </h3>
    <p style="word-wrap: break-word;"> 
        ThisIsAVeryLongWordThatWillBreakAndWrapOntoTheNextLine 
    </p>
</body>
</html>

斷字屬性

word-break 屬性用於指定單詞在到達行尾時應如何換行。此屬性對於處理不自然換行的文字（例如長單詞或URL）特別有用。

p{
    word-break: normal | break-all | keep-all;
}

讓我們來看一個例子。

示例

<html>
<head>
    <style>
        p{
            border: 2px solid;
            width: 40%; 
            padding: 2%;
        }
    </style>
</head>

<body>
    <h3> Word break break-all </h3>
    <p style="word-break: break-all;"> 
        This-paragraph-contains-some-text.-This-line-will-not-
        break-at-hyphens.
    </p>

    <h3> Word break keep-all </h3>
    <p style="word-break: keep-all;"> 
        This-paragraph-contains-some-text.-This-line-will-break
        -at-hyphens.
    </p>
</body>

</html>

書寫模式屬性

writing-mode 屬性用於定義文字在塊內書寫的方向。此屬性對於支援垂直書寫的語言或建立旋轉文字效果特別有用。

p{
    writing-mode: horizontal-tb | vertical-rl | vertical-lr;
}

讓我們來看一個例子。

示例

<html>
<head>
    <style>
        p{
            border: 2px solid;
            width: 200px; 
            padding: 2%;
        }
    </style>
</head>

<body>
    <h3> Writing mode horizontal-tb </h3>
    <p style="writing-mode: horizontal-tb;"> 
        This text is written in the traditional horizontal 
        direction from left to right
    </p>

    <h3> Writing mode vertical-rl </h3>
    <p style="writing-mode: vertical-rl;"> 
        This text is written vertically from top to bottom, 
        with lines stacked right to left
    </p>

    <h3> Writing mode vertical-lr </h3>
    <p style="writing-mode: vertical-lr;"> 
        This text is written vertically from top to bottom, 
        with lines stacked left to right
    </p>
</body>

</html>

CSS文字效果相關屬性

以下是文字樣式的CSS屬性列表

屬性 描述 示例
text-overflow 指定如何管理溢位容器的文字。
word-wrap 指定是否換行過長的溢位容器的單詞。
word-break 指定當文字溢位容器時是否斷開由連字元分隔的單詞。
writing-mode 指定文字的水平和垂直書寫模式。
text-justify 當text-align設定為“justify”時，指定文字的對齊方法。
列印頁面
上一頁
下一頁
廣告