css强制换行和禁止换行

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;
}