不同窗口大小下的文本被截断

Question

我对这一切都很陌生，所以我感谢你的帮助！

这是我使用的CSS：

.typeit {
  overflow-x: auto; /* Allow horizontal scrolling */
  font-size: calc(45px + 2vw); /* Smaller base size with responsive scaling */
  font-weight: bold;
  padding: 2vh 4vw;
  
  border-right: 2px solid #50bdb8;

  white-space: nowrap; /* Keeps text on a single line */
  text-align: center;
  margin: 0 auto; 
  max-width: 90%;
  
  animation: 
    typeit 3.5s steps(40, end),
    right-border .5s step-end infinite;
}

@keyframes typeit {  
from { width: 0 }
to { width: 100% }
}

@keyframes right-border {
from, to { border-color: transparent }
50% { border-color: #50bdb8; }
}

这是我添加到页面的代码块：

<div class="typeit"> Growing Your Audience Begins Here.</div>

我想让它响应，所以我尝试了 font-size: calc(45px + 2vw);但它不起作用。

Answer 1

.typeit {
  overflow-x: auto; /* Allow horizontal scrolling */
  font-size: max(10px, 4vw);
  font-weight: bold;
  padding: 2vh 4vw;
  
  white-space: nowrap; /* Keeps text on a single line */
  text-align: center;
  margin: 0 auto; 
  max-width: 90%;
  
}

<div class="typeit"> Growing Your Audience Begins Here.</div>