系统公告文字上下滚动

系统公告滚动条设计

最新推荐文章于 2024-05-06 18:29:43 发布

原创最新推荐文章于 2024-05-06 18:29:43 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Root Window</title>
<style type="text/css">
.rolltext{
       height: 25px;
       line-height: 25px;
       overflow: hidden;
       }
       ul{
           margin: 0;
           padding: 0;
       }
       ul li{
           white-space: nowrap;
           overflow: hidden;
text-overflow: ellipsis;
       }
.gonggao{
   display: flex;
}
.gonggao-left{
   width: 100px;
   line-height: 25px;
   height: 25px;
   white-space: nowrap;
   padding: 0 10px 0 0;
}
.rolltext{
   display: -webkit-box;
   line-height: 25px;
   max-height: 25px;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
}
       .gonggao-left,.rolltext{
           display: inline-block;
       }
</style>
</head>

<body>
<div class="gonggao">
   <div class="gonggao-left">
       系统公告
   </div>
   <div class="rolltext">
           <ul>
           <li>Interested in ongoing innovation at Boyd? Click here to learn more!</li>
           <li>Click here to join our Aerospace mailing list!</li>
           </ul>
       </div>
</div>

</body>
<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>