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

stefanieliang 发布于2019-08-23 15:23 / 2906人阅读

摘要：就像下面的效果解析这种效果主要通过属性来实现。属性对多行文本的最后一行文本无效。区别如下加了伪类之后，标签的文字之间必须要存在一个空格一个就行，不用太多，否则的话，没有效果。

我们经常会看到表单填写时前面的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*/
产 品

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

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

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

有三点需要注意：

因为加了伪类之后，相当于在标签的文本后又加了一行，所以text-align-last就不起作用了，需要加上text-align

因为加了伪类之后，文本后面会多出一行，即使给伪类设置高度为0也不行。所以必须给.label属性加上一个高度。区别如下：

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

两种方案对比

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

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

GPU云服务器云服务器 js如何实现3d效果固定长度分布式存储如何实现 php固定长度输出

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

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

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

摘要：就像下面的效果解析这种效果主要通过属性来实现。属性对多行文本的最后一行文本无效。区别如下加了伪类之后，标签的文字之间必须要存在一个空格一个就行，不用太多，否则的话，没有效果。我们经常会看到表单填写时前面的label,都是左右对齐的，即使字数不一样。就像下面的效果： showImg(https://segmentfault.com/img/bVboImo?w=482&h=169); 解...

peixn 2019-08-30 15:55 评论0 收藏0
如何实现label长度固定，文字分散分布的效果

摘要：就像下面的效果解析这种效果主要通过属性来实现。属性对多行文本的最后一行文本无效。区别如下加了伪类之后，标签的文字之间必须要存在一个空格一个就行，不用太多，否则的话，没有效果。我们经常会看到表单填写时前面的label,都是左右对齐的，即使字数不一样。就像下面的效果： showImg(https://segmentfault.com/img/bVboImo?w=482&h=169); 解...

hankkin 2019-08-02 14:17 评论0 收藏0
分布式系统关注点——想通关「限流」？只要这一篇

摘要：之前有了解到哥的一部分读者们没有充分搞清楚限流和熔断的关系。后者表示系统在同一时刻能处理的最大请求数量，比如次的并发。后续限流策略需要设定的具体标准数值就是从这些指标中来的。限流阈值不继续处理请求。如果这是第二次看到我的文章，欢迎扫描文末二维码订阅我哟~本文长度为2869字，建议阅读8分钟。可能你在网上看过不少「限流」相关的文章，但是z哥的这篇可能是最全面，最深入浅出的一篇了（容我...

CollinPeng 2019-08-16 13:57 评论0 收藏0
一致性Hash

摘要：当时十分兴奋，立即去找了关于一致性协议的文章来看。到了今天再去回想，发现对一致性协议的概念已经模糊不清了。一致性算法一致性哈希算法在年由麻省理工学院的等人在解决分布式中提出的，设计目标是为了解决因特网中的热点问题，初衷和十分类似。序第一次知道一致性Hash协议是在方腾飞的技术文章实战解析-论三年内快速成长为一名技术专家里看到的。问：对于三十岁的程度员，如果还想再深入做技术，有什么...

spacewander 2019-08-16 13:25 评论0 收藏0