html中文本两端对齐的属性,text-algin:justify实现文本两端对齐方法小结

text-align:justify与text-align-last:justify

1.text-align

MDN中这样介绍到：“text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。text-align并不控制块元素自己的对齐，只控制它的行内内容的对齐。”从这里可以看出，控制文本居中对齐直接写text-align:justify就可以。但是这对于多行文本(即有文本换行)除了最后一行都可以实现两端对齐，最后一行依旧左对齐。所以就需要控制最后一行文本对齐方式的CSS属性：text-align-last。

2.text-align-last

text-align-last 属性规定如何对齐文本的最后一行。但是这里注意一点text-align-last 属性只有在 text-align 属性设置为 “justify” 时才起作用。所以，利用这个属性就可以控制最后一行文本的对齐方式。我们可以想象，如果是单行文本，就可以当作最后一行文本处理，直接设置text-align-last:justify来实现当行文本两端对齐，可惜的是，这样的方法兼容性并不好。

利用CSS实现兼容性较好的两端对齐

从上面的分析可以知道，如果文本出现换行，则除最后一行的所有文本都会实现两端对齐。这时我们想到利用::after伪类，给元素最后设置一个看不见的内联元素，并设置宽度为100%，就可以让我们可以看到的单行文本让浏览器认为是多行文本，从而实现单行文本的两端对齐。具体实现代码如下：

复制代码代码如下:

JS Bin

啊啊

aaaaaa

啊啊啊啊啊

aaaaaa

啊啊啊啊

aaaaaa

复制代码代码如下:

.line{

width:100%;

height:15px;

margin:5px;

background-color: #ccc;

}

.public{

width:80px;

height:100%;

display:inline-block;

text-align: justify;

vertical-align:top;

background-color: #aaa;

}

.public::after{

content:"";

display: inline-block;

width:100%;

overflow:hidden;

height:0;

}

运行结果：

总结

以上就是这篇文章的全部内容了，希望这篇文章能对大家学习或者使用text-algin:justify能有所帮助，如果有疑问大家可以留言交流。

html中文本两端对齐的属性,text-algin:justify实现文本两端对齐方法小结相关推荐

小程序中输入框input的type属性 text、number、idcard、digit 区别
微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...
mysql中关于group的语句指令_mysql不支持group by的解决方法小结
下载安装的是最新版的mysql5.7.x版本,默认是开启了 only_full_group_by 模式的,但开启这个模式后,原先的 group by 语句就报错,然后又把它移除了. 一旦开启 only ...
vscode html 属性换行,vscode中格式化css代码标签属性不换行
vscode中格式化css代码标签属性不换行,如下图,教程,后将,解决方法,首选 vscode中格式化css代码标签属性不换行易采站长站,站长之家为您整理了vscode中格式化css代码标签属性不换 ...
html css中文字段落,css段落文字（中英文混杂）实现两端对齐
今天分享一个小技巧,是中英文两端对齐,只是应对哪些变态的需求.一般情况下还是不推荐使用的,毕竟使用了几句js. 案例如下: 混合使用汉字和英文的段落默认如下: 两边是不对齐的(一般情况下,我们对这种情 ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
text 两端对齐小程序_小程序实现文字两端对齐
我们知道,text-align: justify;对最后一行无效,当有一个段落而最后一行只有两个字时,text-align: justify;的效果是前面N行两端对齐,最后一行居左,这样有利于用户的视 ...
4.文本属性 text
文本属性是文本的颜色,缩进,行间距这些目录 1 文本颜色 color 2 水平对齐文本 text-align 2.1 一行文本垂直居中 3 装饰文本 text-decoration 4 文 ...
html中文本框的readonly属性和disabled属性的区别
最近公司新来的一个实习生在开发系统时对于文本框的readonly属性和disabled属性两者之间有什么不同一直搞不太清楚,其实这两个东西如果不去深究,简单的使用的话大部分情况下两者还是可以通用的,不 ...
html更改textbox的id,NET开发-WebForm中TextBox控件ID、Text、TextModel等属性的使用
.NET开发-WebForm中的TextBox控件 1. TextBox概述在ASP.NET Web应用程序中,TextBox控件是文本框控件.用于在网页表单中,让用户输入文本内容,收集用户信息,然 ...

html中文本两端对齐的属性,text-algin:justify实现文本两端对齐方法小结

html中文本两端对齐的属性,text-algin:justify实现文本两端对齐方法小结相关推荐

最新文章

热门文章