将文字设置成不自动换行，多余的文字隐藏起来

<!-- HTML -->
<div class="text-container">
  这是一段很长的文字，会因为宽度不够而自动换行。
</div>

/* CSS */
.text-container {
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;/* 将超出容器宽度的部分进行隐藏 */
  white-space: nowrap;/* 将文字的换行模式设置为 nowrap */
  width: 200px; /* 或者使用 max-width 控制容器的宽度 */
}

.text-container  是需要隐藏换行文字的容器
display: inline-block 使容器宽度自适应内容长度，再通过 
text-overflow: ellipsis 和 
overflow: hidden 分别进行文本溢出的省略和隐藏，最后设置容器的宽度。这样，可以实现隐藏换行文字的效果，并且保持容器高度不变。