如何实现label长度固定，文字分散分布的效果

我们经常会看到表单填写时前面的label,都是左右对齐的，即使字数不一样。就像下面的效果：

解析

这种效果主要通过text-align-last属性来实现。

text-align-last：规定如何对齐文本的最后一行

在菜鸟教程上对于这个属性有这样的描述：

text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。

但我尝试了一下，当文本只有一行的时候，text-align属性不设置，text-align-last也是有用的。当然这只是针对非IE和Safiri而言。

text-align属性对多行文本的最后一行文本无效。

/*css*/
.label {width: 200px;text-align-last: justify;
}
/*html*/
<div class="label">产 品</div>

这样的写法，对IE浏览器和safari浏览器就不起作用了。因为text-align-last不支持这两个浏览器。

针对这个问题，我们可以用伪类来解决。

/*css*/
.label {width: 200px;height: 30px; /*高度需要添加，不然文字下面会多出一些空隙*/text-align: justify;
}.label:after{content: '';display: inline-block;width: 100%;}
/*html*/
<div class="label">产 品</div>

有三点需要注意：

因为加了伪类之后，相当于在标签的文本后又加了一行，所以text-align-last就不起作用了，需要加上text-align
因为加了伪类之后，文本后面会多出一行，即使给伪类设置高度为0也不行。所以必须给.label属性加上一个高度。区别如下：

加了伪类之后，标签的文字之间必须要存在一个空格（一个就行，不用太多），否则的话，没有效果。

两种方案对比

第二种方法相对于第一种方法来说，兼容性更好，我在多个浏览器测试了一下，都没有问题。

第一种方案更简洁，但是不支持ie和safari，所以建议大家还是用第二种方案更省心。

如何实现label长度固定，文字分散分布的效果相关推荐

小程序空格解决文字分散对齐
目前效果: 我想要得到的文字分散对齐的效果: 网上查了好长时间,基本都是CSS控制样式,弄得我眼花缭乱,一个一个试,在微信小程序里面都不好使,可能是我姿势不对,所以我就"投机取巧" ...
TextView渲染机制与优化(StaticLayout)，TextView上的文字分散对齐，TextView用处
Android 字体适配的各种场景- https://github.com/wildma/FontAdaptation -- TextView中的.setText和.append的区别: setTex ...
Android左边有固定文字的EditText
这个很简单,但如果做项目时临时写出来,也得花几分钟去调试一下实际的效果.相信大家临时因这个小问题打断也不好.所以放出来,供大家即用. 文字输入从光标处开始: package com.idroid.wi ...
python怎么改字体_python,tkinter_Tkinter Label 如何改变Label中的文字样式，例如给文字加删除线，python,tkinter - phpStudy...
Tkinter Label 如何改变Label中的文字样式,例如给文字加删除线如题.未查到Tkinter下,促发条件后,是否能修改label中文字的样式 class Pomodoro_app(Tk) ...
iostext添加点击事件_iOS开发小技巧 - label中的文字添加点击事件
Label中的文字添加点击事件以前老师讲过类似的功能,自己懒得回头看了,找了很多第三方的,感觉这个小巧便利,作者只是扩展了分类,实现起来代码也少.先来个效果图自己的项目,直接上代码 - (void ...
html表格字符分散,如何实现Word表格文字分散对齐？
回答: 解决表格文字分散对齐的问题表格中的文字分散对齐也有它的不足之处,那就是它一般都是以单元格两端的表格线为标准,将所有文字平均分布于单元格中,这就存在一个文字距离表格线过近的问题. 该问题在单元 ...
excel如何在一列文字前统一加上固定文字
在EXCEL中,怎么在一列文字前统一加上某个固定文字?嗯 ,操作步骤不难,下面,一起来看下具体的操作方法. 如图通过编辑栏的公式可以实现右侧效果.
Java应用小技巧---label上的文字显示下划线
最近作的工程要求在panel上label显示的文字代有下划线(如:ok).一开始想了比较笨的办法就是在这个label下面再放一个label,此label的内容就为一条直线.不过后来觉得不好不美观,也麻 ...
自定义UI控件：继承UIlabel，使label中的文字居上，居中，居下
一般来说,在ios里面label中的文字垂直方向上是默认居中的,如果想要设置居上或者居下,在xib文件里面不能设置,只能自定义一个UI控件. label文字的水平位置,可以在xib文件中直接设置. i ...

如何实现label长度固定，文字分散分布的效果

如何实现label长度固定，文字分散分布的效果相关推荐

最新文章

热门文章