由于我没有系统的学过前端，便是碰着一点问题学习一点前端知识。当我在这次实现换行效果的过程中就学习利用了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属性学习的痛楚经由。希望能帮助到你
作者：沐道PHP链接：https://juejin.cn/post/7221341862116540471来源：稀土掘金著作权归作者所有。商业转载请联系作者得到授权，非商业转载请注明出处。
