超宽文本替换为省略号

最新推荐文章于 2024-05-20 15:17:08 发布

神龙大熊

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量316

点赞数 1

分类专栏： CSS 文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/weixin_45925567/article/details/123736706

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

超宽文本替换为省略号

1、设置宽度
2、强制文本在一行显示
3、隐藏溢出部分
4、溢出进行省略

<!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>Document</title>
  <style>
    /*只适用于单行文本*/
    div{ 
        width: 150px;
        border: 3px solid #ccc;
        background: skyblue;
        overflow: hidden;      
        white-space: nowrap;
        text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div>
    今天天气很好！今天天气很好！
  </div>
</body>
</html>