CSS 基础教程：文本（三）

最新推荐文章于 2024-07-12 14:38:32 发布

m0_65012566

最新推荐文章于 2024-07-12 14:38:32 发布

阅读量22

点赞数

分类专栏： css 文章标签： css 前端

原文链接：https://www.tutorialspoint.com/css/css_text.htm

版权

css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

CSS 基础教程：文本（三）

字母间距

调整文本中字母之间的间距会影响页面的可读性和整体美感。

属性 letter-spacing 用于调整文本中字母的间距。字母之间的间距可以增加或减少。

此属性可以具有以下可能的值：

normal：默认值，表示字母之间的正常间距。
length：任何具体长度 {像素 (px)，点 (pt)，ems (em)，或百分比 (%)}。
initial：将 letter-spacing 设置为其默认值。
inherit：允许从其父元素继承 letter-spacing 的值。

注意：实际字母间的间距可能会因所使用的字体而异。

如下示例：

<html>
<head>
</head>
<body>
   <h2>字母间距</h2>
      <p style="letter-spacing: normal;">字母间距正常。</p>
      <p style="letter-spacing: 5px;">字母间距增加。</p>
      <p style="letter-spacing: -1px;">字母间距减少。</p>
</body>
</html>

单词间距

CSS 提供了一个属性来调整文本中单词之间的间距，就像 letter-spacing 一样。调整单词间距的属性是word-spacing。

此属性可以接受以下值：

normal：默认值，表示单词之间的正常间距。
length：任何具体长度 {像素 (px)，点 (pt)，ems (em)，或百分比 (%)}。
initial：将 word-spacing 设置为其默认值。
inherit：允许从其父元素继承 word-spacing 的值。

如下示例：

<html>
<head>
</head>
<body>
   <h2>单词间距</h2>
      <p style="word-spacing: normal;">单词间距正常。</p>
      <p style="word-spacing: 15pt;">单词间距增加。</p>
      <p style="word-spacing: -1px;">单词间距减少。</p>
</body>
</html>

空白

在文本中，空白指的是任何空的空间或不显示可见符号或对文本含义没有任何影响的字符。

以下是可能遇到空白的一些情况：

在第一个可见字符之前出现的前导空格，而在最后一个可见字符之后出现的尾随空格。
空格，通常以换行或段落分隔的形式。
空白经常用于缩进目的，特别是在编程语言中或写结构化文本时。
非断开空白字符，例如 HTML 实体 nbsp ( )，可以使用。
文本中连续的空白被视为单个空格。例如，多次按空格键。

以下是 white-space 属性的不同值：

normal：默认值，在这种情况下，空白序列会被折叠，并且当达到可用宽度时文本会换行到下一行。
nowrap：空白被折叠，文本不会换行到下一行。它会在同一行上继续，溢出可用宽度。
pre：保留 HTML 代码中的空白。换行和多个空格会显示为它们。
pre-wrap：保留换行和空白，显示为它们在 HTML 代码中的样子。
pre-line：折叠空白，但保留换行。文本在达到可用宽度时换行。
break-spaces：折叠空白，但保留换行和换行机会。这是一个实验性的值，可能不被所有浏览器支持。

这些值可以与其他 CSS 属性（如 overflow 和 text-overflow）结合使用，以控制空白的行为。

示例：

<html>
<head>
<style>
   div {border:2px solid red; padding: 5px; margin: 2px; width: 300px; height: 100px;}
</style>
</head>
<body>
   <h2>空白</h2>
   <h4>normal</h4>
   <div>
      <p style="white-space: normal;">空白指任何空的空间或不显示可见符号或对文本含义没有任何影响的字符。</p>
   </div>
   <h4>pre</h4>
   <div>
      <p style="white-space: pre;">空白指任何空的空间或不显示可见符号或对文本含义没有任何影响的字符。</p>
   </div>
   <h4>nowrap</h4>
   <div>
      <p style="white-space: nowrap;">空白指任何空的空间或不显示可见符号或对文本含义没有任何影响的字符。</p>
   </div>
   <h4>pre-wrap</h4>
   <div>
      <p style="white-space: pre-wrap;">空白指任何空的空间或不显示可见符号或对文本含义没有任何影响的字符。</p>
   </div>
   <h4>pre-line</h4>
   <div>
      <p style="white-space: pre-line;">空白指任何空的空间或不显示可见符号或对文本含义没有任何影响的字符。</p>
   </div>
   <h4>break-spaces</h4>
   <div>
      <p style="white-space: break-spaces;">空白指任何空的空间或不显示可见符号或对文本含义没有任何影响的字符。</p>
   </div>
</body>
</html>

空白折叠

white-space-collapse 属性检查如何折叠元素内部的空白。

white-space属性是white-space-collapse 和 text-wrap 属性的简写。

white-space-collapse 的不同值如下：

collapse：空白序列被折叠。
preserve：保留空白序列和段分隔符的字符。
preserve-breaks：折叠空白序列，保留段分隔符的字符。
preserve-spaces：保留空白序列，将段分隔符和制表符转换为空格。
break-spaces：与 ‘preserve’ 类似。连续的空格、制表符和换行将折叠为一个空格，但单个空格保持原样。

white-space-collapse 属性目前只有部分浏览器支持，因为它仍处于实验模式。

文本阴影

text-shadow 属性用于向文本添加阴影效果。它允许指定阴影的颜色、偏移量、模糊半径和扩展半径。

通过使用此属性，您可以创建各种文本效果，例如使文本具有 3D 或发光外观，或为文本添加强调和深度。

该属性指定了 X 和 Y 偏移量、模糊半径和颜色值的组合。值的顺序没有固定要求,是一组逗号分隔的阴影值列表。

text-shadow 属性接受以下值：

<color>：设置阴影的颜色。可选。它可以在偏移值之前或之后指定。可以指定任何颜色值，例如名称、HEX 或 RGB 值。
<offset-x><offset-y>：任何长度值，指定 x 和 y 值。x 值表示阴影距文本的水平距离。y 值表示阴影距文本的垂直距离。如果 x 和 y 值均为 0，则阴影显示在文本后面。
<blur-radius>：任何长度值，指定模糊半径的值。可选。要使模糊看起来更大，需要提供更高的值。如果不设置，则将其视为 0。

下面是一个示例：

<html>
<head>
</head>
<body>
   <h2>文本阴影</h2>
      <p style="text-shadow: 2px 5px yellow;"> 简单文本阴影 </p>
      <p style="text-shadow: 5px 5px 2px #ff00ff;">带模糊半径的文本阴影</p>
      <p style="text-shadow: 1px 1px 2px green, 0 0 1em yellow, 0 0 0.2em red;">多重阴影</p>
      <p style="text-shadow: 0px 0px 10px rgb(26, 69, 105); ">使用 RGB 颜色的文本阴影</p>
</body>
</html>

CSS 文本 - 换行

CSS 提供了 line-break 属性，用于确定如何在文本块中换行。

此属性可以具有以下值：

auto：应用默认换行规则。
loose：应用最不严格的换行规则。
normal：应用最常见的换行规则。
strict：应用最严格的换行规则。
anywhere：允许浏览器在任何地方、在任何字符处应用换行规则。
initial：设置初始值。
inherit：继承父元素的值。

示例如下：

<html>
<head>
<style>
   p {
      border: 2px solid blue;
      width: 200px;
   }
   .normal {
      line-break: normal;
   }
   .loose {
      line-break: loose;
   }
   .strict {
      line-break: strict;
   }
   .auto {
      line-break: auto;
   }
   .anywhere {
      line-break: anywhere;
   }
</style>
</head>
<body>
   <h2>换行</h2>
      <p class="normal">Normal - CSS 提供了 line-break 属性，用于确定如何在文本块中换行。</p>
      <p class="loose">Loose - CSS 提供了 line-break 属性，用于确定如何在文本块中换行</p>
      <p class="strict">Strict - CSS 提供了 line-break 属性，用于确定如何在文本块中换行</p>
      <p class="auto">Auto - CSS 提供了 line-break 属性，用于确定如何在文本块中换行</p>
      <p class="anywhere">Anywhere - CSS 提供了 line-break 属性，用于确定如何在文本块中换行</p>
</body>
</html>

CSS 文本 - 单词换行

CSS 中的 word-break 属性用于指定当单词超出元素的可用宽度时应如何分解或换行。它确定浏览器是否应允许单词在任何地方断开，或者它们应该保持在一起。

此属性可以具有以下值：

normal：使用默认换行规则。
break-all：为了防止溢出，单词之间应用断词处理。
keep-all：对于中文、日文和韩文 (CJK) 文本不使用断词处理；对于其他语言或非 CJK 文本，行为与 normal 相同。
break-word：与 overflow-wrap: anywhere 相同，即应用任何单词的换行。但此值已弃用。

示例

<html>
<head>
<style>
   p {
      border: 2px solid green;
      width: 200px;
   }
   .normal {
      word-break: normal;
   }
   .all {
      word-break: break-all;
   }
   .keep {
      word-break: keep-all;
   }
   .wordbreak {
      word-break: break-word;
   }
</style>
</head>
<body>
   <h2>单词换行</h2>
      <p class="normal">normal - CSS 提供了 word-break 属性，用于确定如何在文本块中换行</p>
      <p class="all">break-all - CSS 提供了 word-break 属性，用于确定如何在文本块中换行</p>
      <p class="keep">keep-all - CSS 提供了 word-break 属性，用于确定如何在文本块中换行</p>
      <p class="wordbreak">break-word - CSS 提供了 word-break 属性，用于确定如何在文本块中换行</p>
</body>
</html>

m0_65012566

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 基础教程：文本（三）

调整文本中字母之间的间距会影响页面的可读性和整体美感。属性用于调整文本中字母的间距。字母之间的间距可以增加或减少。注意：实际字母间的间距可能会因所使用的字体而异。如下示例：</</stylenormal;</style5px;</</</
复制链接

扫一扫