1. 强制换行
word-break: break-all; 只对英文起作用,以字母作为换行依据。
word-wrap: break-word; 只对英文起作用,以单词作为换行依据。
white-space: pre-wrap; 只对中文起作用,强制换行。
2. 禁止换行
white-space:nowrap; /*文本内容就不会换行*/
overflow:hidden; /*是让多出的内容隐藏起来,否则多出的内容会撑破容器。*/
text-overflow:ellipsis; /* 而Firefox浏览器没有这个功能,多出的内容只能隐藏起来。 可选,当内容超出一行时,用省略号表示 */
3. 行省略
.text {
overflow: hidden; // 隐藏超出的文本
text-overflow: ellipsis; // 使用省略号表示超出的文本
white-space: nowrap; // 不换行
}
4. 一行半
在 CSS 中,目前并没有直接实现一行半效果的属性,但是可以通过组合使用其他属性来模拟这种效果。
.text {
display: -webkit-box;
-webkit-line-clamp: 2; // 限制在一个块元素显示的文本行数
-webkit-box-orient: vertical; // 定义子元素的堆叠方向
overflow: hidden;
}