文章: 阅读:

CSS Text 文本格式

CSSCSS

前言

  • CSS3 中包含几个新的文本特征。
属性 描述 CSS 备注 🔗
color 设置文本颜色 1 🔗
direction 设置文本方向 2 🔗
letter-spacing 设置字符间距 1 🔗
line-height 设置行高 1 🔗
text-align 元素中的文本对齐方式 1 🔗
text-decoration 向文本添加修饰 1 🔗
text-indent 缩进元素中文本的首行 1 🔗
text-transform 控制元素中的字母 1 🔗
unicode-bidi 设置或返回文本是否被重写 2 🔗
vertical-align 设置元素的垂直对齐 1 🔗
white-space 设置元素中空白的处理方式 1 🔗
word-spacing 设置字间距 1 🔗
hanging-punctuation 指定一个标点符号是否可能超出行框 3 🔗
punctuation-trim 指定一个标点符号是否要去掉 3 🔗
text-align-last 当 text-align 设置为 justify 时，最后一行的对齐方式 3 🔗
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色 3 🔗
text-justify 当 text-align 设置为 justify 时指定分散对齐的方式 3 🔗
text-outline 设置文字的轮廓 3 🔗
text-overflow 指定当文本溢出包含的元素，应该发生什么 3 🔗
text-shadow 为文本添加阴影 3 🔗
text-wrap 指定文本换行规则 3 🔗
word-break 指定非 CJK 文字的断行规则 3 🔗
word-wrap 设置浏览器是否对过长的单词进行换行 3 🔗

1、文本颜色

  • 颜色属性被用来设置文字的颜色。
属性 描述 CSS 备注 🔗
color 设置文本颜色 1 🔗
  • 属性值
值 描述 实例
颜色的名称 颜色的名称，比如 red, blue, brown, lightseagreen 等，不区分大小写 color: red; / 红色 /
color: black; / 黑色 /
color: gray; / 灰色 /
color: white; / 白色 /
color: purple; / 紫色 /
十六进制 十六进制符号 #RRGGBB 和 #RGB（比如 #ff0000）。
“#” 后跟 6 位或者 3 位十六进制字符（0-9, A-F）		 #f03
#F03
#ff0033
#FF0033
rgb(255, 0, 51)
rgb(255, 0, 51)
RGB，红-绿-蓝（red-green-blue (RGB)） 规定颜色值为 rgb 代码的颜色，函数格式为 rgb(R,G,B)，
取值可以是 0-255 的整数或百分比		 rgb(255, 0, 51)
rgb(255, 0, 51)
rgb(100%, 0%, 20%)
rgb(100%, 0%, 20%)
RGBA，红-绿-蓝-阿尔法（RGBa） RGBa 扩展了 RGB 颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度。
a 表示透明度：0=透明；1=不透明		 rgba(255, 0, 0, 0.1) / 10% 不透明 /
rgba(255, 0, 0, 0.4) / 40% 不透明 /
rgba(255, 0, 0, 0.7) / 70% 不透明 /
rgba(255, 0, 0, 1) / 不透明，即红色 /
HSL，色相-饱和度-明度（Hue-saturation-lightness） 色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度。
饱和度和明度由百分数来表示。
100% 是满饱和度，而 0% 是一种灰度。
100% 明度是白色， 0% 明度是黑色，而 50% 明度是”一般的”		 hsl(120, 100%, 25%) / 深绿色 /
hsl(120, 100%, 50%) / 绿色 /
hsl(120, 100%, 75%) / 浅绿色 /
HSLA，色相-饱和度-明度-阿尔法（HSLa） HSLa 扩展自 HSL 颜色模式，包含了阿尔法通道，可以规定一个颜色的透明度。
a 表示透明度：0=透明；1=不透明		 hsla(240, 100%, 50%, 0.05) / 5% 不透明 /
hsla(240, 100%, 50%, 0.4) / 40% 不透明 /
hsla(240, 100%, 50%, 0.7) / 70% 不透明 /
hsla(240, 100%, 50%, 1) / 完全不透明 /

  • CSS 中，颜色值通常以以下方式定义:

    • 十六进制值，如: ＃FF0000
    • 一个 RGB 值，如: RGB(255, 0, 0)
    • 颜色的名称，如: red

  • 对于 W3C 标准的 CSS：如果你定义了颜色属性，你还必须定义背景色属性。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        body {
            color: red;
        }
        h1 {
            color: #00ff00;
        }
        p.ex {
            color: rgb(0, 0, 255);
        }
    </style>
    1
    2
    3
    4
    5
    <body>
        <h1>这是标题 1</h1>
        <p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
        <p class="ex">这是一个类为 "ex" 的段落。这个文本是蓝色的。</p>
    </body>

  • 效果

2、文本方向

属性 描述 CSS 备注 🔗
direction 设置文本方向 2 🔗
  • 属性值
值 描述
ltr 默认。文本方向从左到右（left to right）
rtl 文本方向从右到左（right to left）
inherit 规定应该从父元素继承 direction 属性的值

  • 实例

    1
    2
    3
    4
    5
    <style>
        div.ex1 {
            direction: rtl;
        }
    </style>
    1
    2
    3
    4
    <body>
        <div>一些文本。默认书写方向。</div>
        <div class="ex1">一些文本。从右到左的书写方向。</div>
    </body>

  • 效果

3、字符间距

属性 描述 CSS 备注 🔗
letter-spacing 设置字符间距 1 🔗
  • 属性值
值 描述
normal 默认。规定字符间没有额外的空间
length 定义字符间的固定空间（允许使用负值）
inherit 规定应该从父元素继承 letter-spacing 属性的值
  • letter-spacing 这个样式使用在英文单词时，是设置字母与字母之间的间距。如果想设置英文单词之间的间距，可以使用 word-spacing 来实现。

  • 汉字的间隔调节也是用 letter-spacing 来实现的。因为中文段落里字与字之间没有空格，因而 word-spacing 通常起不到调整间距的作用。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        h1 {
            letter-spacing: 2px;
        }
        h2 {
            letter-spacing: -3px;
        }
    </style>
    1
    2
    3
    4
    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
    </body>

  • 效果

4、行高

  • 大多数浏览器的默认行高约为 110% 至 120%。
属性 描述 CSS 备注 🔗
line-height 设置行高 1 🔗
  • 属性值
值 描述
normal 默认。设置合理的行间距
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距
length 设置固定的行间距
% 基于当前字体尺寸的百分比行间距
inherit 规定应该从父元素继承 line-height 属性的值

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        p.small {
            line-height: 70%;
        }
        p.big {
            line-height: 200%;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <body>
        <p>
            这是一个标准行高的段落。<br>
            这是一个标准行高的段落。<br>
            大多数浏览器的默认行高约为110%至120%。<br>
        </p>
        <p class="small">
            这是一个更小行高的段落。<br>
            这是一个更小行高的段落。<br>
            这是一个更小行高的段落。<br>
            这是一个更小行高的段落。<br>
        </p>
        <p class="big">
            这是一个更大行高的段落。<br>
            这是一个更大行高的段落。<br>
            这是一个更大行高的段落。<br>
            这是一个更大行高的段落。<br>
        </p>
    </body>

  • 效果

5、文本对齐方式

  • 文本排列属性是用来设置文本的水平对齐方式。
属性 描述 CSS 备注 🔗
text-align 对齐元素中的文本 1 🔗
  • 属性值
值 描述
left 把文本排列到左边。默认值：由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
inherit 规定应该从父元素继承 text-align 属性的值

  • 文本可居中或对齐到左或右，两端对齐。

  • 当 text-align 设置为 “justify”，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        h1 {
            text-align: center;
        }
        p.date {
            text-align: right;
        }
        p.main {
            text-align: justify;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <body>
        <h1>CSS text-align 实例</h1>
        <p class="date">2015 年 3 月 14 号</p>
        <p class="main">
            “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；
            当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，
            行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做
            一些事情；然后，谁知道呢? 我甚至可能改变这个世界。”
        </p>
        <p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
    </body>

  • 效果

6、文本修饰

  • text-decoration 属性用来设置或删除文本的装饰。
属性 描述 CSS 备注 🔗
text-decoration 向文本添加修饰 1 🔗
  • 属性值
值 描述
none 默认。定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本下的一条线
blink 定义闪烁的文本
inherit 规定应该从父元素继承 text-decoration 属性的值

  • 从设计的角度看 text-decoration 属性主要是用来删除链接的下划线。

  • 实例

    1
    2
    3
    4
    5
    <style>
        a {
            text-decoration: none;
        }
    </style>
    1
    2
    3
    <body>
        <p>链接到: <a href="//www.qianchia.com/">qianchia.com</a></p>
    </body>

  • 效果

  • 也可以这样装饰文字，不建议强调指出不是链接的文本，因为这常常混淆用户。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        h1 {
            text-decoration: overline;
        }
        h2 {
            text-decoration: line-through;
        }
        h3 {
            text-decoration: underline;
        }
    </style>
    1
    2
    3
    4
    5
    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
    </body>

  • 效果

7、文本缩进

  • 文本缩进属性是用来指定文本的第一行的缩进。
属性 描述 CSS 备注 🔗
text-indent 缩进元素中文本的首行 1 🔗
  • 属性值
值 描述
length 定义固定的缩进。默认值：0
% 定义基于父元素宽度的百分比的缩进
inherit 规定应该从父元素继承 text-indent 属性的值

  • 实例

    1
    2
    3
    4
    5
    <style>
        p {
            text-indent: 50px;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <body>
        <p>In my younger and more vulnerable years my father gave me some advice that I've been turning
            over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just
            remember that all the people in this world haven't had the advantages that you've had.'
        </p>
    </body>

  • 效果

8、阴影

  • CSS3 中，text-shadow 属性适用于文本阴影。
属性 描述 CSS 备注 🔗
text-shadow 向文本添加阴影 3 🔗
box-shadow 设置一个或多个下拉阴影的框 3 🔗
  • 属性值
text-shadow 值 描述
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色
box-shadow 值 描述
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
  • 注意：Internet Explorer 9 以及更早的浏览器不支持 text-shadow 属性。

8.1 文本阴影

  • 指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。

  • 实例

    1
    2
    3
    4
    5
    <style>
        h1 {
            text-shadow: 5px 5px 5px red;
        }
    </style>
    1
    <h1>Text-shadow effect!</h1>

  • 效果


    Text-shadow effect!


8.2 盒子阴影

属性 描述 CSS 备注 🔗
box-shadow 设置一个或多个下拉阴影的框 3 🔗

  • CSS3 中 box-shadow 属性适用于盒子阴影。

  • 写 box-shadow 的依次顺序为：

    1
    2
    3
    h-shadow   v-shadow   blur   spread   color     insect

    水平阴影     垂直阴影    模糊   阴影尺寸   颜色   外阴影转到内阴影

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        div {
            width: 300px;
            height: 100px;
            background-color: yellow;
            box-shadow: 10px 10px 5px #888888;
        }
    </style>
    1
    <div></div>

  • 效果



8.3 阴影颜色

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
        div {
            width: 300px;
            height: 100px;
            padding: 15px;
            background-color: yellow;
            box-shadow: 10px 10px grey;
        }
    </style>
    1
    <div>This is a div element with a box-shadow</div>

  • 效果


    This is a div element with a box-shadow

8.4 模糊效果

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
        div {
            width: 300px;
            height: 100px;
            padding: 15px;
            background-color: yellow;
            box-shadow: 10px 10px 5px grey;
        }
    </style>
    1
    <div>This is a div element with a box-shadow</div>

  • 效果


    This is a div element with a box-shadow

8.5 伪元素中添加阴影效果

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <style>
        #boxshadow {
            position: relative;
            -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
            -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
            box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
            padding: 10px;
            background: white;
        }
        /* Make the image fit the box */
        #boxshadow img {
            width: 100%;
            border: 1px solid #8a4419;
            border-style: inset;
        }
        #boxshadow::after {
            content: '';
            position: absolute;
            z-index: -1; /* hide shadow behind image */
            -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
            box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
            width: 70%;
            left: 15%; /* one half of the remaining 30% */
            height: 100px;
            bottom: 0;
        }
    </style>
    1
    2
    3
    <div id="boxshadow">
        <img src="https://demo.qianchia.com/media/image/demo/demo21.png" alt="Norway" width="600" height="400" />
    </div>

  • 效果

8.6 卡片效果

  • box-shadow 属性可以用来创建纸质样式卡片。

8.6.1 文字卡片

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <style>
        div.card {
            width: 250px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            text-align: center;
        }
        div.header {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            font-size: 40px;
        }
        div.container {
            padding: 10px;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="card">
        <div class="header">
            <h1>1</h1>
        </div>

        <div class="container">
            <p>January 1, 2016</p>
        </div>
    </div>

  • 效果




    1




    January 1, 2016




8.6.2 图片卡片

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        div.polaroid {
            width: 250px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            text-align: center;
        }

        div.container {
            padding: 10px;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <div class="polaroid">
        <img src="https://demo.qianchia.com/media/image/demo/demo21.png" alt="Norway" style="width: 100%;" />
        <div class="container">
            <p>Hardanger, Norway</p>
        </div>
    </div>

  • 效果





    Hardanger, Norway




9、文本转换

  • 文本转换属性是用来指定在一个文本中的大写和小写字母。
属性 描述 CSS 备注 🔗
text-transform 控制元素中的字母 1 🔗
  • 属性值
值 描述
none 默认。定义带有小写字母和大写字母的标准的文本
capitalize 文本中的每个单词以大写字母开头
uppercase 定义仅有大写字母
lowercase 定义无大写字母，仅有小写字母
inherit 规定应该从父元素继承 text-transform 属性的值

  • 可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        p.uppercase {
            text-transform: uppercase;
        }
        p.lowercase {
            text-transform: lowercase;
        }
        p.capitalize {
            text-transform: capitalize;
        }
    </style>
    1
    2
    3
    4
    5
    <body>
        <p class="uppercase">This is some text.</p>
        <p class="lowercase">This is some text.</p>
        <p class="capitalize">This is some text.</p>
    </body>

  • 效果

10、文本溢出

  • CSS3 文本溢出属性指定应向用户如何显示溢出内容。
属性 描述 CSS 备注 🔗
text-overflow 规定当文本溢出包含元素时发生的事情 3 🔗
  • 属性值
值 描述
clip 修剪文本
ellipsis 显示省略符号来代表被修剪的文本
string 使用给定的字符串来代表被修剪的文本

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        div.test {
            white-space: nowrap;
            width: 12em;
            overflow: hidden;
            border: 1px solid #000000;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>

    <p>div 使用 &quot; `text-overflow: ellipsis;` &quot;:</p>
    <div class="test" style="text-overflow: ellipsis;">This is some long text that will not fit in the box</div>

    <p>div 使用 &quot; `text-overflow: clip;` &quot;:</p>
    <div class="test" style="text-overflow: clip;">This is some long text that will not fit in the box</div>

    <p>div 使用自定义字符串 &quot; `text-overflow: >>;` &quot; (只在 Firefox 浏览器下有效):</p>
    <div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div>

  • 效果


    以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。


    div 使用 "text-overflow: ellipsis;":


    This is some long text that will not fit in the box

    div 使用 "text-overflow: clip;":


    This is some long text that will not fit in the box

    div 使用自定义字符串 "text-overflow: >>;" (只在 Firefox 浏览器下有效):


    This is some long text that will not fit in the box

11、垂直对齐

属性 描述 CSS 备注 🔗
vertical-align 设置元素的垂直对齐 1 🔗
  • 属性值
值 描述
baseline 默认。元素放置在父元素的基线上
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部
bottom 使元素及其后代元素的底部与整行的底部对齐
text-bottom 把元素的底端与父元素字体的底端对齐
length 将元素升高或降低指定的高度，可以是负数
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值
inherit 规定应该从父元素继承 vertical-align 属性的值

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        img.top {
            vertical-align: text-top;
        }
        img.bottom {
            vertical-align: text-bottom;
        }
    </style>
    1
    2
    3
    4
    5
    <body>
        <p>一个<img src="https://demo.qianchia.com/media/image/demo/demo1.png" alt="w3cschool" width="50" height="50" />默认对齐的图像。</p>
        <p>一个<img class="top" src="https://demo.qianchia.com/media/image/demo/demo1.png" alt="w3cschool" width="50" height="50" /> text-top 对齐的图像。</p>
        <p>一个<img class="bottom" src="https://demo.qianchia.com/media/image/demo/demo1.png" alt="w3cschool" width="50" height="50" /> text-bottom 对齐的图像。</p>
    </body>

  • 效果

12、字（单词）间距

属性 描述 CSS 备注 🔗
word-spacing 设置字间距 1 🔗
  • 属性值
值 描述
normal 默认。定义单词间的标准空间
length 定义单词间的固定空间
inherit 规定应该从父元素继承 word-spacing 属性的值
  • letter-spacing 这个样式使用在英文单词时，是设置字母与字母之间的间距。如果想设置英文单词之间的间距，可以使用 word-spacing 来实现。

  • 汉字的间隔调节也是用 letter-spacing 来实现的。因为中文段落里字与字之间没有空格，因而 word-spacing 通常起不到调整间距的作用。

  • 实例

    1
    2
    3
    4
    5
    <style>
        p {
            word-spacing: 30px;
        }
    </style>
    1
    2
    3
    <body>
        <p>This is some text. This is some text.</p>
    </body>

  • 效果

13、空白处理

属性 描述 CSS 备注 🔗
white-space 设置元素中空白的处理方式 1 🔗
  • 属性值
值 描述
normal 默认。空白会被浏览器忽略
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止
pre-wrap 保留空白符序列，但是正常地进行换行
pre-line 合并空白符序列，但是保留换行符
inherit 规定应该从父元素继承 white-space 属性的值

  • 实例

    1
    2
    3
    4
    5
    <style>
        p {
            white-space: nowrap;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <body>
        <p>
            这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
            这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
            这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
            这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
            这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
        </p>
    </body>

  • 不设置 white-space 效果

  • 设置 white-space 效果

14、文本换行

  • 如果某个单词太长，不适合在一个区域内，它扩展到外面。

  • CSS3 中，自动换行属性允许强制文本换行 - 即使这意味着分裂它中间的一个字。

属性 描述 CSS 备注 🔗
word-break 规定非中日韩文本的换行规则 3 🔗
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行 3 🔗
  • 属性值
word-break 值 描述
normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行
word-wrap 值 描述
normal 只在允许的断字点换行（浏览器保持默认处理）
break-word 在长单词或 URL 地址内部进行换行

  • 允许长文本换行。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        p.test {
            width: 11em;
            border: 1px solid #000000;
            word-wrap: break-word;
        }
    </style>
    1
    2
    <p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word
        will break and wrap to the next line.</p>

  • 效果


    This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.


14.1 单词拆分换行

  • CSS3 单词拆分换行属性指定换行规则。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style>
        p.test1 {
            width: 9em;
            border: 1px solid #000000;
            word-break: keep-all;
        }
        p.test2 {
            width: 9em;
            border: 1px solid #000000;
            word-break: break-all;
        }
    </style>
    1
    2
    <p class="test1"> This paragraph contains some text. This line will-break-at-hyphenates.</p>
    <p class="test2"> This paragraph contains some text: The lines will break at any character.</p>

  • 效果


    This paragraph contains some text. This line will-break-at-hyphenates.


    This paragraph contains some text: The lines will break at any character.


15、浏览器支持

属性
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0
  • 表格中的数字表示支持该属性的第一个浏览器版本号。
  • 紧跟在 -webkit-, -ms-, -o- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

16、CSS 实例

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:12


评论


文章目录
  1. 1. 前言
  2. 2. 1、文本颜色
  3. 3. 2、文本方向
  4. 4. 3、字符间距
  5. 5. 4、行高
  6. 6. 5、文本对齐方式
  7. 7. 6、文本修饰
  8. 8. 7、文本缩进
  9. 9. 8、阴影
    1. 9.1. 8.1 文本阴影
    2. 9.2. 8.2 盒子阴影
    3. 9.3. 8.3 阴影颜色
    4. 9.4. 8.4 模糊效果
    5. 9.5. 8.5 伪元素中添加阴影效果
    6. 9.6. 8.6 卡片效果
      1. 9.6.1. 8.6.1 文字卡片
      2. 9.6.2. 8.6.2 图片卡片
  10. 10. 9、文本转换
  11. 11. 10、文本溢出
  12. 12. 11、垂直对齐
  13. 13. 12、字（单词）间距
  14. 14. 13、空白处理
  15. 15. 14、文本换行
    1. 15.1. 14.1 单词拆分换行
  16. 16. 15、浏览器支持
  17. 17. 16、CSS 实例
隐藏目录