css3总结之: text-align: justify (两端对齐)
text-align: justify:
大家都知道 text-align 属性是规定元素中的文本的水平对齐方式,最常用的值是left、right、center,那么justify是什么呢?
在W3C上是这样介绍的:
justify 可以使文本的两端都对齐在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等
这段话有点拗口,为了直观点体现出它的特点,所以直接上码上图:
<p style="width:400px;text-align:left;;margin:20px auto;"><strong style="color:#000;margin-bottom:10px;">text-align: left:</strong></br></br>Nettie Maria Stevens was an early American geneticist. In 1905, she and Edmund Beecher Wilson were the first researchers to independently describe the chromosomal basis of sexNettie在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。</br></br>浪漫满溢 </p><p style="width: 400px;text-align: justify;margin:20px auto;"><strong style="color:#000;margin-bottom:10px;">text-align: justify:</strong></br></br>Nettie Maria Stevens was an early American geneticist. In 1905, she and Edmund Beecher Wilson were the first researchers to independently describe the chromosomal basis of sexNettie在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。</br></br>浪漫满溢 </p>
上面的代码很简单,第一个是字体左对齐,另一个是两端对齐,出来的效果是这样的:
两种方法放一块比较就可以看出使用了 text-align: justify 文字的两端是对齐的。
但是仔细观察一下,发现为了两端对齐,有些文字的间距就被拉开了(第二行的英文)。有时候间隔隔得太大会造成阅读困难,所以如果有需要的情况下用letter-spacing收缩字符间距就可以了。
另外, text-align-last:right 可以改变段落的最后一行的对齐方式。但是只有在 text-align 属性设置为 "justify" 时才起作用
如果这个方法排版会是怎样的呢?
<ul class="justify_list"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul>
.justify_list{text-align: justify;text-justify:distribute-all-lines;width: 600px;} li{width:100px; height:100px;background-color: #0086b3; display: inline-block; list-style:none; }
效果如下:
这时候发现,被挤下来的部分并没有左右两端对齐。
经过查询才知道原来是text-align:justify 不处理块内的最后一行文本(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)
既然如此,解决方法就简单了:
.justify_list:after {width: 100%;height: 0;margin: 0;display: inline-block;overflow: hidden;content: '';}
效果如下:
总体来说实现得还不错。在排版的时候不需要计算每个列表元素间的margin间距,比用float的时候省事很多。
css3总结之: text-align: justify (两端对齐)相关推荐
- html表格如何两段对齐,用css3多列属性实现css两端对齐
要实现css两端对齐,我在网上找了很多方法,都不怎么实用,都是兼容性闹得,column是css3的属性,是多列布局,使用column来实现两端对齐简单实用,就要设置下模块的个数跟column的列数一致 ...
- chrome css两端对齐,两端对齐布局与text-align:justify
百分比实现 首先最简单的是使用百分比实现,如下一个展示列表: .list{ width: %; background: #f0f0f9; list-style: none; font-size: ; ...
- 两端对齐的CSS怎么写?
在设计页面的时候会涉及到文本对齐的问题,默认情况下是靠左对齐的,但有些时候也乤靠右对齐.本文给大家介绍下css两端对齐,看看css两端对齐怎么设置,以及css中文本的对齐有哪些. 一.css两端对齐怎 ...
- 两端文字对齐css,css两端对齐怎么设置,css中文本的对齐有哪些
css两端对齐怎么设置,css中文本的对齐有哪些 内容导读:除了css两端对齐,本文还介绍了主要的css中文本的对齐有哪些.可以看到,常见的文本对齐方式是靠左.居中以及靠右,相对来说css两端对齐用得 ...
- css如何实现文字两端对齐,CSS实现文字两端对齐的方法是什么
CSS实现文字两端对齐的方法是什么 发布时间:2020-08-31 14:13:18 来源:亿速云 阅读:76 作者:小新 小编给大家分享一下CSS实现文字两端对齐的方法是什么,希望大家阅读完这篇文章 ...
- html中单行文本,利用css实现单行文本文字两端对齐
日常使用中我们可以用 text-align: justify; 实现文本两端对齐效果. 但是该属性有一个问题,不支持单行文本的两端对齐,只有达到2行或者以上才会有效. 所以需要采用下面两种方法实现单行 ...
- display:inline-block+text-align:justify实现列表元素的两端对齐
display:inline-block+text-align:justify实现列表元素的两端对齐. 2011-09-21 08:49:22 display:inline-block+text-al ...
- 两端对齐布局与text-align:justify
百分比实现 首先最简单的是使用百分比实现,如下一个展示列表: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta char ...
- css3 怎样让文字两边对齐,CSS3两端对齐实现方法
CSS3两端对齐实现方法 时间:2018-01-18 来源:CSS3两端对齐讲解 大家都知道 text-align 属性是规定元素中的文本的水平对齐方式,最常用的值是left.right.ce ...
最新文章
- 两台电脑之间用网线之间传文件
- SAP Fiori My task里complete checkbox的处理
- Introduction to the Linux Kernel
- Phthon学习---错误处理、调试和测试
- VMware Harbor 学习
- Mad Libs游戏:熟悉python编程环境,基本输入输出
- WinEdt 打开***.bib文件时 error reading
- python字典的作用_python字典方法介绍
- 002649:bootdo项目改造计划
- Java进阶之路,Java程序员职业发展规划
- report machine实现报表分栏
- ASP.NET实现验证码图片
- vue+element项目,升级element后带tabs模块的页面。导致页面崩溃白屏问题?
- 在线免费一键将头像转换卡通形象
- Citespace的英文文献数据导入
- 滴滴Uber又打起来了!外卖领域C位花落谁家?
- vue element-ui动态横向统计表格
- 巡检机器人智能图像识别算法
- RunCat 小猫测速cpu
- python无法安装pyqt5_关于python pyqt5安装失败问题的解决方法
热门文章
- linux命令中:wq和:wq!区别
- java gmail smtp_使用Javamail连接到Gmail smtp服务器会忽略指定的端口,并尝试使用25...
- 插上网线进入转发状态需要等30s,是什么问题?-网络热门问题分析
- SUA 编译 BASH
- win与linux谁运行快,Linux、Windows,谁速度更快
- QQ珊瑚虫版被判侵权 作者陈寿福赔偿腾讯十万元
- python怎么画极坐标,python极坐标的绘制
- 全志A10s芯片手册资料(Datasheet)
- S7-1200通过MODBUS转PROFINET网关控制英威腾GD200A变频器的具体方法示例
- 小米平板4能装Linux系统吗,终于迎来它!小米平板4进行重大更新