html tr行内样式左对齐,探索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;

}

很好理解是吧，只针对首行进行居中操作，当多行时，首行已经铺满了，居中或者居左效果已经不明显了，只是稍微有点瑕疵，首行的居中效果和后面的文字看着有些不太整齐的感觉(因为当一行剩余空间不足一个字符的时候会掉下去)