帮我做一个宽度为50且只显示一行文字的文本 但是内容文字可以上下滚动

好的，可以使用CSS中的overflow和white-space属性来实现。

HTML代码：

<div class="container">
  <p class="text">这是一段可以滚动的文本内容</p>
</div>

CSS代码：

.container {
  width: 50px;
  height: 20px;
  overflow: hidden;
}

.text {
  white-space: nowrap;
  overflow: hidden;
  animation: scroll 5s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

解释一下，首先我们将容器的宽度设置为50px，高度设置为20px，并将overflow属性设置为hidden，这样就能够控制文本的显示范围。

接着，为文本设置white-space属性为nowrap，这样文本就不会自动换行。同时，将overflow属性也设置为hidden，这样就能够限制文本的显示范围，超出部分将被隐藏。

最后，我们通过CSS中的animation属性和keyframes关键字来实现文本的滚动效果。具体来说，我们定义一个名为scroll的动画，让文本在5秒内从左向右移动，直到滚动到最右侧时再从最左侧开始滚动，如此循环。

这样，我们就实现了一个宽度为50且只显示一行文字的文本，但是内容文字可以上下滚动的效果。