整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
isplay的属性值inline-block是让元素在一行显示，html元素默认上下排列的，所以中间有换行符，于是并排显示就有了换行符带来的空隙。这些空隙在大多数网页布局中并不合适，那么如何解决呢？
方案一：将html标签要display:inline-block 的元素写在一行。缺点：代码可读性差。
方案二：给父元素设置font-size:0,缺点是子元素如果里面有文字，文字会消失不见，所以又要给子元素设置font-size:0,增加了代码量。
方案三：给元素设置float:left,缺点高度塌陷，要清楚浮动。
方案四：设置子元素的margin-left为负值，但是元素之间的间隙大小是根据上下文的字体大小确定的，而每个浏览器的换行空隙大小不同，如果font-szie：16px,chrome空隙为8px,火狐空隙为4px.所以这个方法不通用。
方案五：设置父元素 display:table;word-spacing:-1em;目前这个方法可以完美解决，且兼容其他浏览器。
使用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属性学习的痛苦经过。希望能帮助到你
作者：沐道PHP
链接：https://juejin.cn/post/7221341862116540471
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
使用demo
div { -ms-transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0);}CSS前缀自动补全：autoprefixer
已知: margin:20px; border:10px; padding:10px; width:200px; height:50px;
标准盒模型:1\. 占用宽:margin*2+padding*2+border*2+width=20*2+10*2+10*2+200=2802\. 占用高:margin*2+padding*2+border*2+height=20*2+10*2+10*2+50=1303\. 盒子实际宽度:padding*2+border*2+width=10*2+10*2+200=2404\. 盒子实际高度padding*2+border*2+height=10*2+10*2+50=90
怪异盒模型:1\. 占用宽:margin*2+width=20*2+200=2402\. 占用高:margin*2+height=20*2+50=903\. 盒子实际宽度:width=2004\. 盒子实际高度height=50
IE8及更早版本不兼容问题解决方案：在HTML页面声明
BFC（块状格式化上下文，独立的盒子，布局不受外部影响，但是如果同一个BFC中，同级块状元素的margin-top和margin-bottom会重叠）
只要元素满足下面的任一条件，都会触发BFC特征。
解决问题:
元素被当成行内元素排版时，元素直接的空白符会被浏览器处理，根据white-spack的处理方式（默认是normal,合并多余空白），Html代码在回车换行时被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block元素之间就出现了空隙。
复现<ul> <li>首页</li> <li>登陆</li> <li>资源</li> <li>社区</li> <li>帮助</li></ul>
解决办法：
优先级相同时会发生什么? 样式被覆盖
normalize.css是一个css reset的替代方案。
ul>li:nth-child(2n+1) { background-color: red; }ul>li:nth-child(2n) { background-color: yellow;}
ul>li:first-child { border-top: none; }
有梦想的人，眼睛会发光。
希望屏幕前的你，能够关注我一波。接下来，我会分享前端各种干货，以及编程中的趣事。
*请认真填写需求信息，我们会在24小时内与您取得联系。
