CSS排版与文字布局：文本换行、文本溢出处理

CSS排版与文字布局

一、文本换行

在CSS中，文本的换行方式主要由white-space属性控制。默认情况下，white-space属性值为normal，表示文本中的空格、换行符和制表符都会被合并成一个空格。如果想让文本保留原有的换行符，可以将white-space属性值设置为pre或pre-wrap。

/* 保留原有换行符 */
white-space: pre;

/* 保留原有换行符，同时自动换行 */
white-space: pre-wrap;

二、文本溢出处理

当文本内容过长时，如何处理溢出的文本内容呢？这就需要用到text-overflow属性和overflow属性。

1. text-overflow属性

当文本溢出时，text-overflow属性可以用来指定溢出部分的显示方式。常见的属性值有两种：ellipsis和clip。其中，ellipsis表示使用省略号来代替溢出的文本内容，而clip表示将溢出的文本内容简单地截断。

/* 使用省略号代替溢出的文本内容 */
text-overflow: ellipsis;

/* 简单地截断溢出的文本内容 */
text-overflow: clip;

2. overflow属性

overflow属性用来控制元素溢出时是否显示滚动条。常见的属性值有三种：visible、hidden和scroll。其中，visible表示溢出的内容可见，hidden表示溢出的内容不可见，scroll表示溢出的内容可见并显示滚动条。

/* 溢出的内容可见 */
overflow: visible;

/* 溢出的内容不可见 */
overflow: hidden;

/* 溢出的内容可见并显示滚动条 */
overflow: scroll;

三、代码案例

下面是一些常见的文本布局效果及其实现代码：

1. 单行文本省略号

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

.example .ellipsis {
  font-size: 14px;
  line-height: 1.5;
}

2. 多行文本省略号

.example {
  width: 200px;
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.example .multiline-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  line-height: 1.5;
}

3. 文本强制换行

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

4. 文本两端对齐

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

.example .justify:after {
  content: '';
  display: inline-block;
  width: 100%;
}

}

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： CSS媒体查询：响应式网页设计的基础
• 下一篇： CSS盒子阴影效果：内阴影、外阴影、模糊效果