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”时，指定文本的对齐方法。
打印页面
上一页
下一页
广告