自适应Toast的demo

用在了结婚纪念网站上和博客上

by Mike Lin

HTML

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
初始化文本
</div>
</div>

CSS

.parent {
    padding: 0 24px;
    font-size: 1.5em;
    background-color: rgba(252,66,66,.9);
    color: #FFF;
    border-radius: 5px;
    position: fixed;
    right: 10px;
    top: 69px;
    z-index: 2000;
    max-width: 568px;
  }
  .child{
    /* display: inline-block; */
    height: 48px;
    line-height: 48px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    word-wrap: break-word;
    width: 100%;
    text-align: center;
  }

JavaScript

window.onload= function(){
      setTimeout(function(){
        $('.child').text('短一点的');
      }, 2000)
      setTimeout(function(){
        $('.child').text('这是为了测试这个，尽量的延长文本长度');
      }, 3000)
    }