1200字范文 > 单行文字溢出隐藏显示省略号

单行文字溢出隐藏显示省略号

时间：2021-11-25 12:22:26

相关推荐

单行文字溢出隐藏显示省略号

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>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。