文本样式

通过深入探究CSS中的text属性及其具体应用，我们发现，尽管看似细微，但正是这些属性共同构建起了网页文本的精美框架。掌握这些属性，能够让您的网页文本既符合设计规范，又能彰显个性特色。在实践中不断尝试和应用这些属性，您将能够在网页设计的道路上不断进步，成就卓越的文本排版艺术。无论是新手还是老手，均可以从这段探索之旅中受益匪浅，不断提升网页设计与开发的专业素养。

换行行为

只对英文起作用，以字母作为换行依据 word-break: normal|break-all|keep-all;规定自动换行的处理方法。

.text{ word-break:break-all;}

只对英文起作用，以单词作为换行依据。word-wrap 属性允许长单词或 URL 地址换行到下一行。

.text{ word-wrap:break-word;}

white-space

white-space 属性设置如何处理元素内的空白。white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit; 只对中文起作用，强制换行，英文以单词换行。

.text{ white-space:pre-wrap; }

强制不换行，中英都起作用

.text{ white-space:nowrap; }

省略号……

不换行，超出部分隐藏且以省略号形式出现

.text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

多行，指定行数，截断显示省略号

.text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

文本基本样式

下划线、上划线、删除线等overline,line-through,underline 指定装饰线的颜色 text-decoration-color 指定装饰线的样式 text-decoration-style 指定装饰线的粗细 text-decoration-thickness 简写属性 text-decoration

.text{ 
  text-decoration:overline;
  text-decoration-color: blue;
  text-decoration-style: solid;
  text-decoration-thickness: 5px;
}

首行文本的缩进

.text{
  text-indent:50px;
}

大写、小写、字母大写开头uppercase,lowercase,capitalize

.text{
  text-transform:uppercase;
}

书写方向从右到左

.text{
  direction:rtl;
  unicode-bidi:bidi-override;
}

文本垂直位置

.text{
  direction:rtl;
  unicode-bidi:bidi-override;
}

vertical-align 属性设置一个元素的垂直对齐方式。top,bottom,text-bottom、middle...

.text{
  vertical-align:text-top;
}

设置如何对齐最后一行或紧挨着强制换行符之前的行。right,center,justify

.text{
  text-align-last: right;
}

文本间距

字符间距

.text{
  letter-spacing:2px;
}

字间距

.text{
  word-spacing:30px;
}

文本阴影 text-shadow

xy偏移，模糊距离，颜色。可以重复设置多个。

h1 { 
  text-shadow: 2px 2px; 
}
h1 {
  text-shadow: 2px 2px red;
}
h1 {
  text-shadow: 2px 2px 5px red;
}
h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

文字描边text-stroke属性

text-stroke属性为文字添加描边效果。这个描边效果，说白了就是给文字添加边框。

div {
    font-family:Verdana;
    font-size:50px;
    font-weight:bold;
    color:transparent;  /*设置文字颜色为透明*/
    -webkit-text-stroke:2px red;
}
div {
  background:-webkit-linear-gradient(red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color:#fff;
  -webkit-text-stroke:6px transparent;
}
div {
  font-family: Verdana;
  font-size: 50px;
  font-weight: bold;
  background: url(./images/img-1.png);
  background-size: 200px 100px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 6px transparent;
}

图片文字功能

<div class="text">测试功能<div>

移入动画过度图片背景

div {
  width: 400px;
  height: 150px;

  background-image: url('./images/case-01.png');
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-size: 400px 300px;
  background-position: 0px -60px;


  color: #bbb;
  font-size: 100px;
  font-weight: 700;
  text-align: center;
  line-height: 150px;

  text-shadow: 0px 0px 1px #8B2500;

  transition: all 700ms;
}

div:hover {
  text-shadow: 0px 0px 100px #000;
}

图片背景

div {
  background-image: url('./images/case-01.png');
  background-size: 200px 90px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 50px;
  font-weight: bold;
}

渐变文字

div {
  background: -webkit-linear-gradient(#f00, #00f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-size: 20px;
}

文字环绕

shape-outside 属性

shape-outside 是不规则形状环绕布局的核心，支持的属性值分为如下四大类：

/* Keyword values */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* Function values */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
shape-outside: path("M100,0 A100,100 0 1,1 100,200 A100,100 0 1,1 100,0");

/* <url> value */
shape-outside: url(image.png);

/* <gradient> value */
shape-outside: linear-gradient(45deg, #fff 150px, red 150px);

/* Global values */
shape-outside: inherit;
shape-outside: initial;
shape-outside: revert;
shape-outside: revert-layer;
shape-outside: unset;

shape-margin 属性

shape-margin 属性比较好理解，即文字环绕图形时候，距离边界的距离。

shape-margin: 20px;
shape-margin: 20em;
shape-margin: 20rem;
shape-margin: 20%;

shape-image-threshold 属性

shape-image-threshold 指图像环绕时候的半透明阈值，默认是0.0，也就是图像透明度为0的区域边界才能环绕。同理，如果值是 0.5 表示透明度小于 0.5 的区域都可以文字环绕。

/* <number> value */
shape-image-threshold: 0.7;

/* Global values */
shape-image-threshold: inherit;
shape-image-threshold: initial;
shape-image-threshold: revert;
shape-image-threshold: revert-layer;
shape-image-threshold: unset;

demo

基础样式

p {
  text-align: justify;
  color: #dadada;
  line-height: 1.6;
}

.circle {
  float: left;
  width: 200px;
  height: 200px;
  margin-right: 20px;
}

.ellipse {
  float: right;
  width: 200px;
  height: 300px;
  margin-left: 20px;
}

.polygon {
  float: left;
  width: 200px;
  height: 200px;
  margin-right: 20px;
}

环绕样式

p {
  text-align: justify;
  color: #dadada;
  line-height: 1.6;
}

.circle {
  float: left;
  width: 200px;
  height: 200px;
  clip-path: circle();
  shape-outside: circle(50%);
}

.ellipse {
  float: right;
  width: 200px;
  height: 300px;
  shape-outside: ellipse(50% 50% at 50% 50%);
	clip-path: ellipse(50% 50% at 50% 50%);
}

.polygon {
  float: left;
  width: 200px;
  height: 200px;
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  shape-outside: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}