CSS文字换行自动居中(文字换行时居左的样式)

在网页设计中，文字排版和对齐对于美观和易读性都非常重要。CSS提供了多种方式来控制文字换行和自动居中，本文将从多个方面进行详细阐述。

一、文字换行

1、CSS word-break属性

CSS word-break属性定义了怎样断开单词和跨行。常用属性值有normal、break-all、keep-all、break-word。其中break-all可以让单词从中间分开，跨越两行，小试代码：

p {
  width: 200px;
  border: 1px solid #ccc;
  word-break: break-all;
}

2、CSS word-wrap属性

CSS word-wrap属性指示浏览器是否允许单词折行到下一行。word-wrap属性有两个值：normal、break-word。break-word允许单词折行，小试一下代码：

p {
  width: 200px;
  border: 1px solid #ccc;
  word-wrap: break-word;
}

1、CSS text-align属性

CSS text-align属性定义文本对齐方式。可以设置为left、right、center、justify等。其中，center可实现水平居中，代码如下：

div {
  text-align: center;
}

2、CSS line-height属性

CSS line-height属性定义行间距，行间距是指基线之间的距离，它可以垂直居中文本。常用取值有normal、数值、百分比等。小试一下代码：

p {
  line-height: 2em;
}

1、CSS overflow属性

CSS overflow属性定义溢出元素的处理方式。常用取值有visible、hidden、scroll、auto等。当文本内容超过容器宽度时，可以通过设置overflow属性来控制文本溢出。例如：

p {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  overflow: hidden;
}

2、CSS text-overflow属性

CSS text-overflow属性定义当文本溢出容器时，如何显示文本的末尾。常用取值有clip、ellipsis、string等。可以使用省略号来显示文本的末尾，例如：

p {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

CSS white-space属性定义如何处理元素中的空白符，包括空格、制表符、换行符等。常用取值有normal、nowrap、pre-wrap、pre等。预格式化文本可以保留源代码格式，例如：

pre {
  white-space: pre;
  font-family: "Courier New", Courier, monospace;
}

以上是CSS文字换行、自动居中和文本溢出处理的几种方案。在实际应用中，根据需求选择适合的方案可以使页面排版更加美观、易读。希望本文对您有所帮助。