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

最新推荐文章于 2024-07-24 20:42:50 发布

一个好好的程序员

最新推荐文章于 2024-07-24 20:42:50 发布

阅读量1.5k

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/m0_62823653/article/details/123276173

版权

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

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>

一个好好的程序员

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
单行文字溢出隐藏显示省略号

单行文字溢出隐藏显示省略号1.让换行的文字强制在一行显示。属性white-space: nowrap; 2. 溢出的部分隐藏。overflow: hidden； 3.文字溢出显示用省略号。text-overflow: ellipsis;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv...
复制链接

扫一扫