我想要的效果是，文字从右向左滚动，超出左边部分不显示，该怎么做呢？

代码片段：https://developers.weixin.qq.com/s/brnOVTmj7aj6

class="aa">
  class="bb">
    class="notice" style="--marqueeTime--:10s;">
      class="nn">{{event}}
    
  



.notice{
  animation-name: around;
  animation-duration: var(--marqueeTime--);  /*过渡时间 从wxml传过来*/
  animation-iteration-count: infinite; /*重复*/
  animation-timing-function:linear; /*速度*/
  overflow:hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
}
@keyframes around {
  0% {
   margin-left: 100%;
  }
  100% {
   margin-left: -600%;
  } 
 }


 .bb{
  width: 92%;
  /* margin-left: 4%; */
  height: 4.5vh;
 }
 .aa{
   position: fixed;
   top: 0;
   width: 100%;
   display: flex;
   justify-content: center;
 }

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that=this;
    
    var text = '请确认已开启了网络流量，网络较差时会导致定位不准确，影响您的行程体验。超过两小时后，如果您没有继续驾乘，系统会主动结束您的行程订单，您的积分会按照实际里程计算。驾乘时途径山洞或隧道，会影响您的GPS定位信息，导致定位不准确。为了您的行车安全，驾乘时请不要盯着手机，系统会自动为您记录行程。';  
    that.setData({
        event:text ,
    })
  },