CSS文本换行、不换行、超出部分显示省略号处理

Posted on | In |

CSS实现不换行、自动换行、强制换行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 自动换行
.summary {
 word-wrap: break-word;
 word-break: normal;
}

// 强制不换行
.summary {
  white-space: nowrap;
}

// 强制英文单词换行
.summary {
  word-break: break-all;
}

CSS实现超出部分显示省略号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 单行文本不换行多余文本显示省略号
.summary {
  width: 200px; // For Element Width
  white-space: nowrap; // 规定段落中的文本不进行换行
  overflow: hidden; // 超出部分隐藏
  text-overflow: ellipsis; // 超出部分显示省略号
}

// 多行文本超出隐藏多余文本显示省略号
.summary {
  display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示  *必须结合的属性*
  overflow: hidden; // 超出部分隐藏
  text-overflow: ellipsis; // 超出部分显示省略号
  -webkit-line-clamp: 3; // 用来限制在一个块元素中显示的文本的行数
  -webkit-box-orient: vertical; // 设置伸缩盒对象的子元素的排列方式  *必须结合的属性*
  word-break: break-all; // 让浏览器实现在任意位置的换行 *break-all为允许在单词内换行*
}

table表格中单元格单行文本不换行

1
2
3
4
5
6
7
8
9
10
11
12
// table表格中单元格单行文本不换行
  table {
   table-layout: fixed;
   tr {
     td {
        width: 60%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
     }
   }
}

参考链接

CSS实现不换行/自动换行/文本超出隐藏显示省略号