2023年6月21日发(作者：)

htmltr⾏内样式左对齐,探索CSS单⾏⽂字居中，多⾏⽂字居左的实现⽅式很久以前刚⼊前端那会，产品经理提出了这样⼀个需求这段⽂字能不能这样判断⼀下，当⽂字不⾜⼀⾏时，让它居中显⽰，当⽂字超过⼀⾏就让它居左，不然居中显⽰很奇怪，因为最后⼀⾏是吊着的琢磨了⼀下，当时我还真按照产品经理的逻辑，通过js判断⼀下⽂字的⾼度，如果超过⼀⾏，就添加⼀个类名，⽽且这样的⽂字很多地⽅都有，所以还做了遍历，还有最重要的⼀点是关于⽅法执⾏的时机，有可能刚加载的时候⾼度还获取不到(当时好像还⽤了定时器，还造成了先居中随后居左跳动的现象)...//伪代码$('.text').each(function(){if($(this).height()>30){$(this).addClass('mul');}})然后这些⽂本有可能还是动态⽣成的，所以还得在⽣成⽂本的地⽅再调⽤⼀次这个⽅法，功能是做出来了，可别说有多啰嗦了，体验也不咋地(虽然外⾯的⼈看不到)当时也在想，如果是CSS实现，那么就完全不⽤考虑这些问题了！关于CSS实现思路其实只要你逻辑清晰，js都能实现出来，按照正常的思路⼀步⼀步⾛下来就⾏了。CSS可不是这样，她需要你有更多的想象⼒。⽐如上⾯这种需求，表⾯上来看是需要判断⽂本⾏数，这完全不是CSS能⼲的事呀，不过我们可以换个⽅向思考，⽂本默认是居左的(默认⽂本流)，只有⾸⾏是居中的，⾸⾏可以联想到::first-line伪元素，所以可以试着这样实现⼀下这段⽂字能不能这样判断⼀下，当⽂字不⾜⼀⾏时，让它居中显⽰，当⽂字超过⼀⾏就让它居左p::first-line{text-align:center;}很好理解是吧，只针对⾸⾏进⾏居中操作，当多⾏时，⾸⾏已经铺满了，居中或者居左效果已经不明显了，只是稍微有点瑕疵，⾸⾏的居中效果和后⾯的⽂字看着有些不太整齐的感觉(因为当⼀⾏剩余空间不⾜⼀个字符的时候会掉下去)解决这个问题也很简单，上⾯的问题是由于⾸⾏⼀直处于居中状态，那有没有什么办法可以只要⼀⾏的时候才居中呢？这⾥可以借助⼀下text-align-last，意思就是规定多⾏⽂本的最后⼀⾏的居中⽅式，如果和::first-line⼀起使⽤，既要满⾜⾸⾏⼜要满⾜是最后⼀⾏，是不是就判断出了当前只有⼀⾏呢？p::first-line{/*匹配⾸⾏*/text-align-last:center;/*最后⼀⾏居中*/}这下就正常了，有点⾸尾夹击的味道~遗憾的是，由于::first-line⽀持样式⾮常有限(MDN)，上述实现⽅法仅在chrome下有效，不过这种逻辑还是和js差别很⼤的虽然上述并没有text-align相关属性，不过chrome却已经⽀持了~更好的实现⽅式1.⽗级text-align:center，⼦级inline-block+text-align:left⾸先来看看兼容性最好的实现⽅式结构如下这段⽂字能不能这样判断⼀下，当⽂字不⾜⼀⾏时，让它居中显⽰，当⽂字超过⼀⾏就让它居左样式如下.content{text-align: center;}.text{display: inline-block;text-align: left;}这个⽅式最早是在《CSS世界》中学到的，⼤概原理如下：对于⼀个元素，如果其display属性值是inline-block，那么其宽度由内部元素决定，但永远⼩于“包含块”容器的尺⼨，也就是“包裹性(shrink-to-fit)”可能这样描述的不够直观，来上述的案例简单来讲当⽂本⽐较少时，.text的宽度跟随⽂本，然后我们可以使⽤⽗级text-align:center来使⼀个inline-block元素居中，所以可以满⾜单⾏⽂本居中的效果，当⽂本⽐较多时，.text的宽度跟随⽗级容器，由于text-align:center会继承下去，所以在.text上修复⼀下即可兼容性⼀级棒~:fit-content+margin:auto上述⽅式是通过⽗级text-align:center来实现inline-block居中的，很巧妙，但是额外增加了标签，因为inline-block元素⽆法本⾝居中的。块级block元素可以在设置宽度后直接通过margin:0 auto来实现居中，但是必须指明宽度，不然就⽔平填充了，这两者的关系很微妙，有没有什么办法能够让块级block元素的宽度像inline-block元素跟随内部元素呢？答案就是width:fit-content，详细可参考这篇⽂章width:fit-content可以实现元素收缩效果的同时，保持原本的block⽔平状态，于是，就可以直接使⽤margin:auto实现元素向内⾃适应同时的居中效果了。下⾯的实现⽅式均只需要单层标签这段⽂字能不能这样判断⼀下，当⽂字不⾜⼀⾏时，让它居中显⽰，当⽂字超过⼀⾏就让它居左.text{width: fit-content;width: -moz-fit-content;//⽕狐需要-moz-前缀margin: 0 auto;}当然，这种特性IE肯定是不⽀持的~on:relative+transform仍需设置display:inline-block来实现⾃适应，然后配合transform来实现⽔平⽅向居中效果，实现也很简洁~.text{display: inline-block;position: relative;left: 50%;transform: translateX(-50%);}y:table+margin:auto前⼀种⽅式width:fit-content很有效，IE不⽀持怎么办呢？其实默认display已经有这种特性了，当display属性值是table，元素会表现出和width:fit-content的效果，既⽀持宽度跟随内部元素，⼜⽀持⽔平⽅向上margin居中.text{display: table;margin: 0 auto;}IE8也完美⽀持~和grid实现对于flex和grid来说，实现这样⼀个效果还是挺容易的。在flex容器中，所有⼦项成为弹性项，包括纯⽂本节点(匿名盒⼦)，就好像包裹了⼀层，所以很容易通过justify-content: center实现居中，同时(匿名盒⼦)也跟随⽂本⾃适应宽度，当超过⼀⾏时，就按照默认的⽂本对齐⽅式。grid同理，只不过对齐⽅式需要通过justify-items: center。flex实现.text{display: flex;justify-content: center;}grid实现.text{display: grid;justify-items: center;}相对于flex，grid的兼容性要差⼀些，所以尽量选取flex⽅式，⾄少移动端和IE10(需要-ms-)是没问题的实现本以为float实现不了的，感谢林⼩志提供了float居中的实现⽅法，⼤致原理如下：本⾝float元素是具备包裹特性的，主要难点在于如何居中，毕竟没有float:center这种写法，这⾥主要⽤到两层标签，利⽤position:relative;left:50%正负抵消来实现.content{position: relative;float: left;left: 50%;/**⽗级设置50%**/}.text{position: relative;float: left;left: -50%;/**⼦级设置-50%**/}略微繁琐⼀点，不过也不失为⼀种⽅法，兼容性也极好⼩结上述⼀共列举了8种实现⽅式，当然第⼀种属于实验性质的，兼容性少的可怜，但也不失为⼀种思路。怎么想到这些⽅法呢？第⼀就是联想。⽐如上述提到了⾃适应(简单来讲就是尺⼨由内容决定)，我就想哪些可以实现⾃适应呢？除了inline-block，还有float、position:absolute、display:table等...⾸先float就排除了，元素设置了float后，整体居中其实是件⿇烦的事，⼏乎不可能(经过试验，可以实现)。position:absolute还是挺有希望的，借助left:50%;transform:translateX(-50%)可以实现居中效果， 尝试了⼀番，发现宽度⽆法⾃适应⽗级宽度，同样失败(说不定可以，只是没有想到)~~最后选择了diaplay:table，也算是循序渐进。flex和grid就更不⽤说了，天然就是为弹性布局⽽⽣了，实现这类效果不奇怪。第⼆还是基础。CSS属性可就那么多，那只是停留在表⾯，很多看起来不相关的属性在整个体系中⼜会有些微妙的关系，⽐如上⾯的width:fill-content，单独看这个肯定很鸡肋，完全可以⽤inline-block来代替，但是他却可以让⼀个普通的div元素具备inline-block的特性，不得不佩服CSS的设计~(肯定有设计⼈员参与)前⼀段时间在思考做⼀个可视化编辑⼯具，希望可以通过⼀些属性，就像photoshop那样，直接作出⼀个页⾯来，想想看，发现只能作出最最基本的样式，也就颜⾊，⼤⼩什么的，如果要做成本⽂这样⼀个效果，⼋成是做不了的，除了本⾝是做开发，别⼈怎么可能知道这样设置呢？可视化编辑⼯具的道路还很长很长，所以做前端的也⽆需担⼼被其他什么“⼀键⽣成⼯具”给取代了~各位⼩伙伴如果还有其他实现⽅式可在下⽅留⾔评论，如果⽂章有错误请及时指出，谢谢~

2023年6月21日发(作者：)

htmltr⾏内样式左对齐,探索CSS单⾏⽂字居中，多⾏⽂字居左的实现⽅式很久以前刚⼊前端那会，产品经理提出了这样⼀个需求这段⽂字能不能这样判断⼀下，当⽂字不⾜⼀⾏时，让它居中显⽰，当⽂字超过⼀⾏就让它居左，不然居中显⽰很奇怪，因为最后⼀⾏是吊着的琢磨了⼀下，当时我还真按照产品经理的逻辑，通过js判断⼀下⽂字的⾼度，如果超过⼀⾏，就添加⼀个类名，⽽且这样的⽂字很多地⽅都有，所以还做了遍历，还有最重要的⼀点是关于⽅法执⾏的时机，有可能刚加载的时候⾼度还获取不到(当时好像还⽤了定时器，还造成了先居中随后居左跳动的现象)...//伪代码$('.text').each(function(){if($(this).height()>30){$(this).addClass('mul');}})然后这些⽂本有可能还是动态⽣成的，所以还得在⽣成⽂本的地⽅再调⽤⼀次这个⽅法，功能是做出来了，可别说有多啰嗦了，体验也不咋地(虽然外⾯的⼈看不到)当时也在想，如果是CSS实现，那么就完全不⽤考虑这些问题了！关于CSS实现思路其实只要你逻辑清晰，js都能实现出来，按照正常的思路⼀步⼀步⾛下来就⾏了。CSS可不是这样，她需要你有更多的想象⼒。⽐如上⾯这种需求，表⾯上来看是需要判断⽂本⾏数，这完全不是CSS能⼲的事呀，不过我们可以换个⽅向思考，⽂本默认是居左的(默认⽂本流)，只有⾸⾏是居中的，⾸⾏可以联想到::first-line伪元素，所以可以试着这样实现⼀下这段⽂字能不能这样判断⼀下，当⽂字不⾜⼀⾏时，让它居中显⽰，当⽂字超过⼀⾏就让它居左p::first-line{text-align:center;}很好理解是吧，只针对⾸⾏进⾏居中操作，当多⾏时，⾸⾏已经铺满了，居中或者居左效果已经不明显了，只是稍微有点瑕疵，⾸⾏的居中效果和后⾯的⽂字看着有些不太整齐的感觉(因为当⼀⾏剩余空间不⾜⼀个字符的时候会掉下去)解决这个问题也很简单，上⾯的问题是由于⾸⾏⼀直处于居中状态，那有没有什么办法可以只要⼀⾏的时候才居中呢？这⾥可以借助⼀下text-align-last，意思就是规定多⾏⽂本的最后⼀⾏的居中⽅式，如果和::first-line⼀起使⽤，既要满⾜⾸⾏⼜要满⾜是最后⼀⾏，是不是就判断出了当前只有⼀⾏呢？p::first-line{/*匹配⾸⾏*/text-align-last:center;/*最后⼀⾏居中*/}这下就正常了，有点⾸尾夹击的味道~遗憾的是，由于::first-line⽀持样式⾮常有限(MDN)，上述实现⽅法仅在chrome下有效，不过这种逻辑还是和js差别很⼤的虽然上述并没有text-align相关属性，不过chrome却已经⽀持了~更好的实现⽅式1.⽗级text-align:center，⼦级inline-block+text-align:left⾸先来看看兼容性最好的实现⽅式结构如下这段⽂字能不能这样判断⼀下，当⽂字不⾜⼀⾏时，让它居中显⽰，当⽂字超过⼀⾏就让它居左样式如下.content{text-align: center;}.text{display: inline-block;text-align: left;}这个⽅式最早是在《CSS世界》中学到的，⼤概原理如下：对于⼀个元素，如果其display属性值是inline-block，那么其宽度由内部元素决定，但永远⼩于“包含块”容器的尺⼨，也就是“包裹性(shrink-to-fit)”可能这样描述的不够直观，来上述的案例简单来讲当⽂本⽐较少时，.text的宽度跟随⽂本，然后我们可以使⽤⽗级text-align:center来使⼀个inline-block元素居中，所以可以满⾜单⾏⽂本居中的效果，当⽂本⽐较多时，.text的宽度跟随⽗级容器，由于text-align:center会继承下去，所以在.text上修复⼀下即可兼容性⼀级棒~:fit-content+margin:auto上述⽅式是通过⽗级text-align:center来实现inline-block居中的，很巧妙，但是额外增加了标签，因为inline-block元素⽆法本⾝居中的。块级block元素可以在设置宽度后直接通过margin:0 auto来实现居中，但是必须指明宽度，不然就⽔平填充了，这两者的关系很微妙，有没有什么办法能够让块级block元素的宽度像inline-block元素跟随内部元素呢？答案就是width:fit-content，详细可参考这篇⽂章width:fit-content可以实现元素收缩效果的同时，保持原本的block⽔平状态，于是，就可以直接使⽤margin:auto实现元素向内⾃适应同时的居中效果了。下⾯的实现⽅式均只需要单层标签这段⽂字能不能这样判断⼀下，当⽂字不⾜⼀⾏时，让它居中显⽰，当⽂字超过⼀⾏就让它居左.text{width: fit-content;width: -moz-fit-content;//⽕狐需要-moz-前缀margin: 0 auto;}当然，这种特性IE肯定是不⽀持的~on:relative+transform仍需设置display:inline-block来实现⾃适应，然后配合transform来实现⽔平⽅向居中效果，实现也很简洁~.text{display: inline-block;position: relative;left: 50%;transform: translateX(-50%);}y:table+margin:auto前⼀种⽅式width:fit-content很有效，IE不⽀持怎么办呢？其实默认display已经有这种特性了，当display属性值是table，元素会表现出和width:fit-content的效果，既⽀持宽度跟随内部元素，⼜⽀持⽔平⽅向上margin居中.text{display: table;margin: 0 auto;}IE8也完美⽀持~和grid实现对于flex和grid来说，实现这样⼀个效果还是挺容易的。在flex容器中，所有⼦项成为弹性项，包括纯⽂本节点(匿名盒⼦)，就好像包裹了⼀层，所以很容易通过justify-content: center实现居中，同时(匿名盒⼦)也跟随⽂本⾃适应宽度，当超过⼀⾏时，就按照默认的⽂本对齐⽅式。grid同理，只不过对齐⽅式需要通过justify-items: center。flex实现.text{display: flex;justify-content: center;}grid实现.text{display: grid;justify-items: center;}相对于flex，grid的兼容性要差⼀些，所以尽量选取flex⽅式，⾄少移动端和IE10(需要-ms-)是没问题的实现本以为float实现不了的，感谢林⼩志提供了float居中的实现⽅法，⼤致原理如下：本⾝float元素是具备包裹特性的，主要难点在于如何居中，毕竟没有float:center这种写法，这⾥主要⽤到两层标签，利⽤position:relative;left:50%正负抵消来实现.content{position: relative;float: left;left: 50%;/**⽗级设置50%**/}.text{position: relative;float: left;left: -50%;/**⼦级设置-50%**/}略微繁琐⼀点，不过也不失为⼀种⽅法，兼容性也极好⼩结上述⼀共列举了8种实现⽅式，当然第⼀种属于实验性质的，兼容性少的可怜，但也不失为⼀种思路。怎么想到这些⽅法呢？第⼀就是联想。⽐如上述提到了⾃适应(简单来讲就是尺⼨由内容决定)，我就想哪些可以实现⾃适应呢？除了inline-block，还有float、position:absolute、display:table等...⾸先float就排除了，元素设置了float后，整体居中其实是件⿇烦的事，⼏乎不可能(经过试验，可以实现)。position:absolute还是挺有希望的，借助left:50%;transform:translateX(-50%)可以实现居中效果， 尝试了⼀番，发现宽度⽆法⾃适应⽗级宽度，同样失败(说不定可以，只是没有想到)~~最后选择了diaplay:table，也算是循序渐进。flex和grid就更不⽤说了，天然就是为弹性布局⽽⽣了，实现这类效果不奇怪。第⼆还是基础。CSS属性可就那么多，那只是停留在表⾯，很多看起来不相关的属性在整个体系中⼜会有些微妙的关系，⽐如上⾯的width:fill-content，单独看这个肯定很鸡肋，完全可以⽤inline-block来代替，但是他却可以让⼀个普通的div元素具备inline-block的特性，不得不佩服CSS的设计~(肯定有设计⼈员参与)前⼀段时间在思考做⼀个可视化编辑⼯具，希望可以通过⼀些属性，就像photoshop那样，直接作出⼀个页⾯来，想想看，发现只能作出最最基本的样式，也就颜⾊，⼤⼩什么的，如果要做成本⽂这样⼀个效果，⼋成是做不了的，除了本⾝是做开发，别⼈怎么可能知道这样设置呢？可视化编辑⼯具的道路还很长很长，所以做前端的也⽆需担⼼被其他什么“⼀键⽣成⼯具”给取代了~各位⼩伙伴如果还有其他实现⽅式可在下⽅留⾔评论，如果⽂章有错误请及时指出，谢谢~