text-align:justify 使用参考

对 text-align:justify 不大了解的，可以先看这里：从css text-align:justify 谈谈 text-align 文本对齐方式，讲的比较浅显易懂，本篇相对深入些，最好先看前面的

写代码的时候遇到这样一个设计图：

文字格式是两端对齐，首先想到的是用 letter-spacing ，不过很麻烦，不太方便。实际上 text-align:justify, 可以实现两端对齐！以下图为例：

<div class="par"><span class="son">上海</span><span class="son">上海活动</span><span class="son">内蒙古活动上</span>
</div>

* {margin: 0;padding: 0;
}.par {width: 170px;overflow: hidden;border: 1px solid grey;text-align: justify;padding: 10px;
}.son {font-size: 15px;
}
.son::after {content: '';height: 0;width: 100%;display: inline-block;
}

注意点：

1、需要两端对齐的元素改成了 span,内联元素，当然你想用 div 也行，不过得设置 display:inline; 原理应该很好理解，text-align 本来就是针对文字内容样式的，当然应该是内联样式；

2、.son 都用了伪元素，核心样式设置了 height:0、width:100%、display:inline-block; 这是用伪元素多撑一行，因为 text-align:justify 对最后一行没用；display 不能为 block，否则无效，因为 text-align 是针对文本内容的，对于块级元素自然无效，但是设置 inline 又无法设置宽高多占一行，所以只能 inline-block;

3、text-align:justify 加在父元素上

后面是针对 IE8 ，正常可以忽略不用看了。

不幸的是，IE8 不行，或者 IE 都不行，要兼容 IE 也不是不行，方法倒是想出来了，不过你肯定不会用来给文字做这样的排版，效果图：

CSS:

* {margin:0;padding:0;
}
.par {width: 170px;overflow: hidden;border: 1px solid grey;  text-align:justify;padding:10px;
}
.son  {            font-size: 15px; display: inline-block;
}
.justify {height: 0;width: 100%;display: inline-block;
}

HTML:

<div class="par">  <span class="son">上</span><span class="son">海</span>    <span class="justify"></span><span class="son">上</span><span class="son">海</span><span class="son">活</span><span class="son">动</span>    <span class="justify"></span><span class="son">内</span> <span class="son">蒙</span> <span class="son">古</span> <span class="son">活</span> <span class="son">动</span> <span class="son">上</span>    <span class="justify"></span>
</div>

我知道你被这样的代码吓到了，，，我也是，，，但是换成照片两端对齐就会很好用，效果图(左边 chrome ,右边 IE8)：

代码是这样的：

CSS:

* {margin:0;padding:0;
}
.par {width: 170px;overflow: hidden;border: 1px solid grey;           text-align:justify;padding:10px;
}
.son  {            font-size: 15px; display: inline-block;
}
.justify {height: 0;width: 100%;display: inline-block;
}
img {width: 30px;height: 30px;
}

HTML:

<div class="par"><span class="son"><img src="data:images/google.png" alt="" /></span><span class="son"><img src="data:images/google.png" alt="" /></span>        <span class="justify"></span><span class="son"><img src="data:images/google.png" alt="" /></span><span class="son"><img src="data:images/google.png" alt="" /></span><span class="son"><img src="data:images/google.png" alt="" /></span>       <span class="justify"></span><span class="son"><img src="data:images/google.png" alt="" /></span><span class="son"><img src="data:images/google.png" alt="" /></span><span class="son"><img src="data:images/google.png" alt="" /></span><span class="son"><img src="data:images/google.png" alt="" /></span><span class="son"><img src="data:images/google.png" alt="" /></span>       <span class="justify"></span>
</div>

这种用法咱们总结下：

1、两端对齐的元素要是一个个 inline-block 元素，所以图片可以直接放，文字就要被迫拆开了

2、需要换行的，用 span.justify 换，样式还和之前一样，空占一行，这样同一行的会自动两端对齐

3、其他和前面一样，但是有一点要注意， span 元素间必须有间隔，譬如正常换行是可以的、有空格也是可以的，如果连在一起就没有效果

举例：

代码：

参考文章，推荐：(第一篇讲的很细致)

从css text-align:justify谈谈text-align文本对齐方式
text-jusyify下的inline-block自适应列表布局末行对齐修复实例页面

行文仓促,如有错误,欢迎批评指正~~~

转载于:https://www.cnblogs.com/xianshenglu/p/8033547.html

text-align:justify 使用参考相关推荐

html5 text align,CSS属性参考 | text-align
CSS text-align 属性指定块级元素中的内联元素(如文字和图片)的对齐方式. CSS text-align属性并不控制块级元素的对齐方式,它控制块级元素里面的内联元素的对齐方式.虽然这个属性 ...
处理器startup.s 常见汇编指令,伪指令解释 .globl _start .section .data .text .align
.section .data 汇编程序中以.开头的名称并不是指令的助记符,不会被翻译成机器指令,而是给汇编器一些特殊指示,称为汇编指示(Assembler Directive)或伪操作(Pseudo- ...
html text align属性,CSS中的text-align属性怎么用
CSS的text-align属性可用于设置文本的位置,接下来的这篇文章将给大家介绍关于CSS中的text-align属性的用法,下面我们来看具体的内容. 我们先来看一段简单的代码在此处显示文字效果 ...
html text align属性,HTML canvas
实例在位置 150 创建一条红线.位置 150 是下面实例中定义的所有文本的锚点.请研究每种 textAlign 属性值的效果: YourbrowserdoesnotsupporttheHTML5c ...
html css text align,css – text-indent不起作用,而text-align：right
看起来保持对齐对于浏览器来说更重要,所以文本的正确边缘保持在右边,无论如何. 该文档设置为ltr方向,因此缩进应用于该行的左侧,但由于您已经表示要将其与右对齐,所以浏览器完全忽略该缩进.我没有解释为什 ...
[笔记]这阶段的有道云笔记前端部分整理
js现在可以运行在 1.浏览器端 2.计算机操作系统上通过大名鼎鼎的node, node是由c/cpp编写的js运行环境,大概是js通过编译变成c变成汇编变成机器语言...大概 node编译 js ...
css参考手册css3手册_CSS手册：面向开发人员CSS便捷指南
css参考手册css3手册 I wrote this article to help you quickly learn CSS and get familiar with the advanced ...
学习笔记-Flutter 布局（二）- Padding、Align、Center详解
Flutter 布局(二)- Padding.Align.Center详解本文主要介绍Flutter布局中的Padding.Align以及Center控件,详细介绍了其布局行为以及使用场景,并对源码 ...
在Ubuntu 14.04 64bit上为Sublime text 3安装搜狗拼音输入法
Sublime text 3不支持中文输入法,下面是我结合网上的各种资料摸索实践了一遍,为Sublime text 3成功添加了搜狗拼音输入法,特此记录以备参考. 前提条件: 事先安装并配置好搜狗拼音 ...

text-align:justify 使用参考

text-align:justify 使用参考相关推荐

最新文章

热门文章