css一行变两行

在进行 Web 前端开发时，我们通常会遇到一种情况——文字太长，超出了容器的宽度。此时，我们可以使用 CSS 来实现一行显示不下的文字自动换行成两行。下面我们来了解一下如何使用 CSS 来实现这个效果。

 .text {
    width: 200px; /* 假设容器宽度为 200px */
    white-space: normal; /* 让文字按照空格进行换行 */
    word-wrap: break-word; /* 如果一行的文字超出了容器宽度，就强制换行 */
    overflow: hidden; /* 隐藏多出来的文字 */
    text-overflow: ellipsis; /* 在文字截断处显示省略号 */
  } 

上面的代码中，我们首先给容器设置一个宽度，这里假设为 200px。为了让文字能够自动换行，我们需要将 white-space 属性设置为 normal，这样文字就会按照空格进行换行。接着，我们将 word-wrap 属性设置为 break-word，这样当文字超出一行时，就会强制换行。同时，我们还需要将 overflow 属性设置为 hidden，这样一旦文字超出了容器的宽度，就会被隐藏起来。最后，我们使用 text-overflow 属性在文字截断处显示省略号。

有了这些 CSS 样式，当文字太长时，它就会自动换行成两行，还能够在截断处显示省略号，使得页面看起来更加美观。