CSS3学习笔记-句子排版效果

CSS3提供了丰富的排版效果，可以通过样式属性来控制文本的排列方式、字体样式、行高、字间距等。以下是一些常用的句子排版效果示例：

1. 文本对齐方式：

.text-center {
  text-align: center;
}

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

.text-justify {
  text-align: justify;
}

1. 字体样式：

.text-bold {
  font-weight: bold;
}

.text-italic {
  font-style: italic;
}

.text-underline {
  text-decoration: underline;
}

1. 行高和字间距：

.line-height {
  line-height: 1.5;
}

.letter-spacing {
  letter-spacing: 2px;
}

1. 首字母大写：

.text-capitalize {
  text-transform: capitalize;
}

1. 文本阴影效果：

.text-shadow {
  text-shadow: 2px 2px 4px #000000;
}

1. 文本溢出省略号：

单行后文本溢出省略号

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

双行后文本溢出省略号

.text-ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;

  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

以上只是一些常用的句子排版效果示例，你可以根据需要自由组合这些样式属性，实现更多个性化的排版效果。