vue添加换行效果white-space详解

在使用Vue开发前端页面的时候，难免会遇到接收的字符串过长，需要让字符串换行。以往在HTML页面开发中，常用的方法是word-wrap：break-word；添加上这行代码后，在块元素定义的宽度不够时输出的文本内容就会换行。但是在vue中使用word-wrap属性就不起作用，网上查找资料说使用white-space：pre-line;就可以实现换行。本文就简单介绍下white-space的使用。

因为我没有系统的学过前端，就是遇到一点问题学习一点前端知识。当我在这次实现换行效果的过程中就学习使用了white-space的用法。

首先按照网上的资料，直接添加white-space：pre-line; 是实现了换行，但是换行却是从第二行中间开始的。具体效果大概如下图：

为什吗会有这个效果呢？第一反应是有空格产生了，哪里来的空格呢？那就是接收的后端传递的字符串中有空格，于是就想办法去处理接收的变量，尝试了以下两种方法：

（1）添加一层盒子嵌套，父盒子font-size：0，子盒子font-size：12px；

.tabBox_tit {
  border: 1px solid red;
  width: 175px;
  height: 50px;
  white-space: pre-line;
  font-size: 0;
  margin: 0 2px 0 10px;
  letter-spacing: 1px;
  box-sizing: border-box;
}
.tabBox_tit span {
  font-size: 16px; /* 根据需求设置具体的字体大小 */
}

/*说明如下：

将 white-space 属性的值从 pre-wrap 修改为 pre-line，这样文本可以从第一行第一个字符输出并且可以自动换行。
将 font-size 属性的值设为 0，以去除在HTML中的空格（空格、回车等），避免产生不必要的空隙。
将 .tabBox_tit 框架内的文字大小设为 0 ，因为前面已经有了一个全局修改，
并通过 .tabBox_tit span 选择器来单独指定文字的大小，这样可以避免子元素继承父元素的字体大小。
*/
复制代码

（2）使用flex布局让内容居中

.tabBox_tit {
  border: 1px solid red;
  width: 175px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-size: 16px; /* 根据需求设置具体的字体大小 */
  margin: 0 2px 0 10px;
  letter-spacing: 1px;
  box-sizing: border-box;
}
/*
说明如下：
将 white-space 属性去掉，因为使用 flex 属性后不需要再用这个属性来控制文本输出。
添加 display: flex 属性，并设置 flex-direction: column，这样会将容器中的元素按列排列。
添加 justify-content: center 和 align-items: flex-start 属性，这样可以使文字垂直居中并从左侧对齐。
*/
复制代码

经过以上两种方式的设置，文本输出样式还是和上面的截图一样，从第二行中间开始输出。这样尝试的时候，没有实现效果，导致我怀疑自己flex布局的知识点没有学好，又去重新温习了一遍flex布局的文档。改来改去一个小时就过去了。内心有点失败的挫折感。这个时候，是不是就说明换行符号不是从变量里面传递过来的呢？

于是，再去查看代码，发现了代码被编辑器格式话之后换行了，在网上查找资料也终于瞅到有人说到这一点了。于是尝试了修改VUE的模板代码，代码如下：

   <!--修改后-->
              <span class="tabBox_tit line1">
                <span class="font-color-red" v-if="val.cart_info.is_gift">赠品</span>{{ val.cart_info.productInfo.store_name + ' | ' }}{{val.cart_info.productInfo.attrInfo?val.cart_info.productInfo.attrInfo.suk: ''}}
              </span>
              <!--修改前 -->
              <span class="tabBox_tit line1">
                <span class="font-color-red" v-if="val.cart_info.is_gift">赠品</span>
                {{ val.cart_info.productInfo.store_name + ' | ' }}
                {{val.cart_info.productInfo.attrInfo?val.cart_info.productInfo.attrInfo.suk: ''}}
              </span>
复制代码

让后，让后我想要的功能就实现了。到这里不得不感慨前端的水真的很深，原来代码格式化也并不是所有的代码都可以使用的。

基于以上的折腾分析，总结一下，Vue实现输出文本自动换行的效果：要做到以下两点：1.HTML代码块不能格式化换行，2.使用white-space：pre-line; 这样就可以了。

正常情况下到这里都应该写完了。但是我又有点强迫症，总觉得不能格式化的代码不好看，或者以后不小心格式化了，文本输出这里又出现问题岂不是很不美。于是去查下white-space这个属性的定义，通过菜鸟教程学习到了更好的解决方法，附菜鸟截图:

根据教程，知道了想实现换行效果又可以格式化代码使用：white-space：normal；就可以了。

以上就是前端white-space属性学习的痛苦经过。希望能帮助到你