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

CSS排版与文字布局


一、文本换行


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

二、文本溢出处理


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

1. text-overflow属性


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

2. overflow属性


overflow属性用来控制元素溢出时是否显示滚动条。常见的属性值有三种：visible、hidden和scroll。其中，visible表示溢出的内容可见，hidden表示溢出的内容不可见，scroll表示溢出的内容可见并显示滚动条。
1
2
3
4
5
6
7
8
/* 溢出的内容可见 */
overflow: visible;
 
/* 溢出的内容不可见 */
overflow: hidden;
 
/* 溢出的内容可见并显示滚动条 */
overflow: scroll;

三、代码案例


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

1. 单行文本省略号


这是一段很长的文本内容，需要进行省略号处理。

1
2
3
4
5
6
7
8
9
10
11
.example {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 
.example .ellipsis {
  font-size: 14px;
  line-height: 1.5;
}

2. 多行文本省略号


这是一段很长的文本内容，需要进行省略号处理。这是一段很长的文本内容，需要进行省略号处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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. 文本强制换行


这是一段很长的文本内容，需要进行强制换行处理。

1
2
3
.example .break-word {
  word-wrap: break-word;
}

4. 文本两端对齐


这是一段需要两端对齐的文本内容。

1
2
3
4
5
6
7
8
9
.example .justify {
  text-align: justify;
}
 
.example .justify:after {
  content: '';
  display: inline-block;
  width: 100%;
}
}

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

猿教程
请先登录后发表评论
  • 最新评论
  • 总共0条评论