单行文字溢出隐藏显示省略号
1.让换行的文字强制在一行显示。属性white-space: nowrap;
2. 溢出的部分隐藏。overflow: hidden;
3.文字溢出显示用省略号。text-overflow: ellipsis;
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单行文字溢出隐藏显示省略号</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}/* 单行文字溢出隐藏显示省略号 */.box1 {/* 设置一个盒子 */width: 100px;height: 50px;background-color: aquamarine;/* 文字过多换行显示,现在强行让文字在一行显示 */white-space: nowrap;/* 然后然溢出的部分文字隐藏 */overflow: hidden;/* 文字溢出显示用省略号。 */text-overflow: ellipsis;}</style></head><body><div class="box1">溢出隐藏溢出隐藏溢出隐藏溢出隐藏</div></body></html>