안녕하세요. 배운거를 응용하여 제 코드를 수정하고 있는데 안됩니다.

말풍선 안에 텍스트를 넣었는데 텍스트가 짤려요.

사각 박스는 box1 이고 둥근 박스는 box2 입니다. 또 글에 효과를 주었는데 이게 짤리는데 영향을 미치는지는 잘 모르겠습니다. 대문자로 된 글의 클래스는 text-delay 이고 소문자로 된 글은 text-delay-appear 입니다. 박스의 패딩과 글자의 마진을 바꿔봐도 효과가 없습니다. 둘째줄에 있는 글자가 박스안에 들어 왔으면 합니다.

CSS와 html 코드는 다음과 같습니다.

 .box1 {
    width: 270px;
    height: 120px;
    margin: 50px auto;
    border: 4px solid #000000;
    text-align: center;
    font-weight: 900;
    color: #000000;
    font-family: arial;
    position: relative;
    padding: 20px 10px 10px 20px;
  }

  .box2 {
    width: 280px;
    height: 120px;
    margin: 50px auto;
    border: 4px solid #000000;
    border-radius: 35px;
    align-items: center;
    text-align: center;
    vertical-align: sub;
    font-weight: 900;
    color: #000000;
    font-family: arial;
    position: relative;
    padding: 20px 10px 10px 10px;
  }

.text-delay-appear{
  margin: auto;
  white-space: nowrap;
  overflow: hidden;
  width: auto;
  opacity: 0;
  animation: type1 1s steps(60, end) forwards;
  animation-delay: 3s;
}

.text-delay{
  margin: auto;
  white-space: nowrap;
  overflow: hidden;
  width: auto;
  opacity:1;
  animation: type 4s steps(60, end);
}

----------------------html----------------------
let bubble = ['class="box1 sb9"', 'class="box2 sb9"']
let quote = ['<p class="text-delay">I AM 60% CERTAIN</p> <p class="text-delay-appear">that it will be lower than 12 degrees Celsius</p>', '<p class="text-delay">THERE IS A 60% PROBABILITY</p> <p class="text-delay-appear">that it will be lower than 12 degrees Celsius</p>'];

<div `+ bubble[0]+`>
  ` + quote[0] + `
</div>