исчезать в тексте слева направо или наоборот

Question

Мне нужно знать, как сделать так, чтобы текст отображался по мере роста div Floating_mask. прямо сейчас текст при увеличении div текст помещается в две строки, когда перевод заканчивается, поскольку div уже на 100%, если он остается таким, каким должен быть.

.floating {

  display: flex;
  align-items: center;
  padding: 4px;
  justify-content: flex-start;
  }

  .container {
    z-index: 1;
    margin-left: 60px;
    margin-right: 20px;
  }

  .mask {
    overflow: hidden;
    position: relative;
    border: 1px solid lightgrey;
    height: 54px;
    width: 54px;
    transition: width 1s;
    display: flex;
    align-items: center;
    transform: translateX(2px);
  }
  
   .button:hover + .mask{
      width: 200px;
   }

  .button {
    position: absolute;
    border: 1px solid lightgrey;
    border-radius: 50%;
    background-color: white;
    padding: 12px;
    z-index: 2;
    top:17px;
    left:17px;
  }


}

<div class="floating">
    <button type="button"  class="button ">
       Icon
    </button>
    <div class="mask">
        <div class="container">
            <p style="margin: 0;font-size:14px">Message group</p>
             <p style="margin: 0;font-size:14px">Message group</p>
        </div>
    </div>
</div>

Answer 1

Простой способ - использовать   между словами.

.floating {

  display: flex;
  align-items: center;
  padding: 4px;
  justify-content: flex-start;
  }

  .container {
    z-index: 1;
    margin-left: 60px;
    margin-right: 20px;
  }

  .mask {
    overflow: hidden;
    position: relative;
    border: 1px solid lightgrey;
    height: 54px;
    width: 54px;
    transition: width 1s;
    display: flex;
    align-items: center;
    transform: translateX(2px);
  }
  
   .button:hover + .mask{
      width: 200px;
   }

  .button {
    position: absolute;
    border: 1px solid lightgrey;
    border-radius: 50%;
    background-color: white;
    padding: 12px;
    z-index: 2;
    top:17px;
    left:17px;
  }


}

<div class="floating">
    <button type="button"  class="button ">
       Icon
    </button>
    <div class="mask">
        <div class="container">
            <p style="margin: 0;font-size:14px">Message&nbsp;group</p>
             <p style="margin: 0;font-size:14px">Message&nbsp;group</p>
        </div>
    </div>
</div>

Answer 2

Попробуйте это css:

.container {
    z-index: 1;
    margin-left: 60px;
    margin-right: 20px;
    position: absolute;
    white-space: nowrap;
    animation: floatText 5s infinite alternate ease-in-out;
  }

Вот скрипка: https://jsfiddle.net/15n3quaL/