CSS:两端对齐原理(text-align:justify)

justCoding 发布于2019-08-30 15:54 / 417人阅读

摘要：我查了下奇巧淫技是什么意思，嘎嘎。我问写个文章会不会被封，他说应该不会，只会被别人揍，哈哈

我是一个小白
我是一个小白
我是一个小白
喷我吧,哈哈

写样式的是时候经常会碰到字体两端对齐的效果,一般就网上找端css样式复制下就结束了,没有考虑过原理是啥
贴下代码

喷我吧

我就纳闷为啥要在p标签后面加一个伪元素是为了什么?但是删除伪元素之后发现text-align:justify就不起作用了
问了别人才知道,text-align:justify只适用于多行文字,而最后一行是不起作用的,
如图

所以,如果要让单行两端对齐的话,必须要这行文字不显示在最后一行上,需要在两端的对齐的标签上添加了一个伪元素(块级元素,或者行内块元素,只要有宽度就行),宽度100%令这个伪元素自动换行至最后一行,这样你所需要的"两端对齐"就能显示在字体上了。

除了伪元素,你也能加个行内块元素img input啥的，也能达到效果，但是建议还是用伪元素比较好吧

喷我吧喷

这么傻的问题，也是问的别人才明白的，别人说这个是奇巧淫技。我查了下奇巧淫技是什么意思，嘎嘎。我问写个文章会不会被封，他说应该不会，只会被别人揍，哈哈

混合云私有云 text-align:justify 文本两端对齐 html两端对齐两端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116994.html

探索发现：CSS实现中文两端对齐

摘要：今天在搜索实现中文两端对齐的解决方法时，偶然发现了这个我遇到问题是看不到效果，无论是英文还是中文，在和下都不起作用。首先，大家要知道，是专门为英文设计的，谁叫是老外发明的呢，用来实现英文语句的两端对齐。今天在搜索CSS实现中文两端对齐的解决方法时，偶然发现了这个hack：我遇到问题是：看不到效果，无论是英文还是中文，在IE和chrome下都不起作用。还好在StackOverflo...

Aomine 2019-08-29 10:58 评论0 收藏0
探索发现：CSS实现中文两端对齐

摘要：今天在搜索实现中文两端对齐的解决方法时，偶然发现了这个我遇到问题是看不到效果，无论是英文还是中文，在和下都不起作用。首先，大家要知道，是专门为英文设计的，谁叫是老外发明的呢，用来实现英文语句的两端对齐。今天在搜索CSS实现中文两端对齐的解决方法时，偶然发现了这个hack：我遇到问题是：看不到效果，无论是英文还是中文，在IE和chrome下都不起作用。还好在StackOverflo...

CocoaChina 2019-08-05 17:50 评论0 收藏0
探索发现：CSS实现中文两端对齐

摘要：今天在搜索实现中文两端对齐的解决方法时，偶然发现了这个我遇到问题是看不到效果，无论是英文还是中文，在和下都不起作用。首先，大家要知道，是专门为英文设计的，谁叫是老外发明的呢，用来实现英文语句的两端对齐。今天在搜索CSS实现中文两端对齐的解决方法时，偶然发现了这个hack：我遇到问题是：看不到效果，无论是英文还是中文，在IE和chrome下都不起作用。还好在StackOverflo...

luffyZh 2019-08-01 15:24 评论0 收藏0
CSS:两端对齐原理(text-align:justify)

摘要：我查了下奇巧淫技是什么意思，嘎嘎。我问写个文章会不会被封，他说应该不会，只会被别人揍，哈哈我是一个小白我是一个小白我是一个小白喷我吧,哈哈写样式的是时候经常会碰到字体两端对齐的效果,一般就网上找端css样式复制下就结束了,没有考虑过原理是啥贴下代码 p { display: inline-block; ...

Jiavan 2019-08-05 15:03 评论0 收藏0
短标题自动两端对齐

摘要：是为了让伪元素宽度和父元素相同并单独占满一行。总结下来也就是说，伪元素自己独占了一行使浏览器认为该元素不是一行文字，而是两行，所以就生效了。前几天在交流群里碰到了这样的一个问题怎样让下图这组短名字保持长度一致，两端对齐呢？showImg(https://segmentfault.com/img/bVUE2g?w=128&h=272); 我在百度上查阅了一些文章，但是经过测试基本都没成...

Maxiye 2019-08-29 13:24 评论0 收藏0