换行

连字符断行

在对文本进行两端对齐时，可能会造成每行单词不一致的结果，可以通过设置hyphens属性来为文本换行时设置连字符

hyphens总共有三种取值：none、manual和auto，其中manual为初始值，表示需要手工插入软连字符­

The only way to get rid of a temptation is to yield to it.
The only way to get rid of a temptation is to yield to it. 
1
2
3
<div lang="en">
  The only way to get rid of a temptation is to yield to it.
</div>
1
2
3
4
5
div {
    text-align: justify;
    -webkit-hyphens: auto;
            hyphens: auto;
}

需要注意的是，在HTML标签中必须设置合适的语言

定义列表换行

在定义列表中，我们往往会想要名和值在同一行，然而由于<dt>和<dd>都是块级元素，结果会导致名和值各占一行

1
2
3
4
5
6
7
8
9
<dl>
  <dt>Name:</dt>
  <dd>tfcx</dd>
  <dt>Email:</dt>
  <dd>tonghao_xjtu@qq.com</dd>
  <dd>1438994285@qq.com</dd>
  <dt>Location:</dt>
  <dd>Xi'an</dd>
</dl>

可以设置紧跟着每个<dd>之后的<dt>的::before伪元素，并且保留空白符和换行

如果有相邻的<dd>，则需要添加,，并利用负外边距减少逗号前的空格

Name:
tfcx
Email:
tonghao_xjtu@qq.com
1438994285@qq.com
Location:
Xi'an
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
dt, dd {
    display: inline;
}
dd {
    margin: 0;
    font-weight: bold;
}
dd + dt::before {
    content: '\A';
    white-space: pre;
}
dd + dd::before {
    content: ', ';
    margin-left: -0.25em;
    white-space: normal;
}

斑马条纹

斑马条纹即文本的每一行交替显示两种背景颜色

Some of us get dipped in flat, some in satin, some in gloss ... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.

可以通过 CSS 渐变生成相应的背景图像，其background-size设置为行高的两倍，并且将background-origin设置为content-box以使背景以content-box的外沿为基准

1
2
3
4
5
6
7
div {
    line-height: 1.5;
    background: beige;
    background-origin: content-box;
    background-image: linear-gradient(rgba(0, 0, 0, .2) 50%, transparent 0);
    background-size: auto 3em;
}

文字效果

凸版印刷效果

要产生物体凹进平面内的错觉：

  • 底部浅色投影

  • 顶部暗色投影

要产生从平面凸起的错觉：

  • 顶部浅色投影

  • 底部暗色投影

The only way to get rid of a temptation is to yield to it.
The only way to get rid of a temptation is to yield to it. 
1
2
3
4
5
6
7
8
9
10
div.left {
    background: hsl(210, 13%, 60%);
    color: hsl(210, 13%, 30%);
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .8);
}
div.right {
    background: hsl(210, 13%, 30%);
    color: hsl(210, 13%, 60%);
    text-shadow: 0 -1px 1px black;
}

空心字效果

可以使用 SVG 实现空心字效果

1
2
3
4
5
6
<div>
  <svg width="2em" height="1.2em">
    <use xlink:href="#css" />
    <text id="css" y="1em">JavaScript</text>
  </svg>
</div>
JavaScript 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div {
    font: bold 500%/1 serif;
    background: darkseagreen;
    color: white;
}
div text {
    fill: currentColor;
}
div svg {
    overflow: visible;
}
div use {
    stroke: black;
    stroke-width: 10;
    stroke-linejoin: round;
}

文字外发光效果

为文本添加几层重叠的text-shadow可以实现发光效果

Hello World!
1
2
3
4
5
div {
    background: #203;
    color: #ffc;
    text-shadow: 0 0 .1em white, 0 0 .3em white;
}

文字凸起效果

使用一长串累加的投影，不设模糊并以 1px 的跨度逐渐错开，使眼色逐渐变暗

Hello World!
1
2
3
4
5
6
7
8
9
10
div {
    background: #58a;
    color: white;
    text-shadow: 0 1px hsl(0, 0%, 85%),
                 0 2px hsl(0, 0%, 80%),
                 0 3px hsl(0, 0%, 75%),
                 0 4px hsl(0, 0%, 70%),
                 0 5px hsl(0, 0%, 65%),
                 0 5px 10px black;
}

环形文字

同样可以通过 SVG 实现

1
2
3
4
5
6
7
8
9
10
<div>
  <svg viewBox="0 0 100 100">
    <path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle" />
    <text>
      <textPath xlink:href="#circle">
        Love You Three Thousand
      </textPath>
    </text>
  </svg>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
div {
    margin: 5em auto;
    width: 10em;
    height: 10em;
    font-size: 1.6em;
}
div svg {
    display: block;
    overflow: visible;
}
div path {
    fill: none;
}
Love You Three Thousand