您的位置：首页 > 其它

针对英文&&数字&&中文通用，文本溢出显示省略号

2019-10-25 15:14 75 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/qq_40055200/article/details/102743556

overflow:hidden;white-space:normal;word-break:break-all;text-overflow:ellipsis


<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

  <meta name="theme-color" content="#fafafa">
  <style>
    @media screen and (max-width: 700px){
      .demo{
        border: 1px solid #000000;
        width: 50px;
        height: 20px;
        overflow:hidden;
        text-overflow:ellipsis;
        word-break:break-all;
        white-space:nowrap;
        margin: 0 auto;
      }
      body{
        background-color: red;
      }
    }
    @media screen and (max-width: 500px){
      .demo{
        border: 1px solid #000000;
        width: 50px;
        height: 20px;
        overflow:hidden;
        word-break:break-all;
        text-overflow:ellipsis;
        white-space:nowrap;
        margin: 0 auto;
      }
      body{
        background-color: blueviolet;
      }
    }
  </style>
</head>

<body>
  <!--[if IE]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <!-- Add your site or application content here -->
  <p>Hello world! This is HTML5 Boilerplate.</p>
  <div class="demo">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航