说起文本对齐,大家都知道text-align,最常用的有left、right、center,今天我们说一下justify,也就是文本两端 对齐。说起来简单,但是有些小坑大家还是要注意的。

现在我们有这样的两行文本,实际开发中我们经常会遇到这样的情景:需要把姓名和电话号码这两段文字对齐。我们自然会想到 text-align: justify; 我也是这么想的,我们来试一下:

刷新一下浏览器,为什么没有效果呢?

原因是 justify 对最后一行无效,而我们的 name 只有一行,当然也就无效了。那我们怎么解决这个问题呢?

我们可以想到,既然justify对最后一行无效,那我们增加一行就好了,只要让它不是最后一行不就ok了?当然我们增加的一行可不能被人看到。这里,我们想到了伪元素。

增加没有文字的一行,我们来看看页面:

很不错,明显已经达到了要求。但是,这样写会不会太麻烦了呢,程序员都是讲究高效率(懒)的人,如果能用一句代码就完成的话,岂不乐哉?

别说,真有。这里安利一个新属性 text-align-last ,废话不多说,直接上代码:

一句代码达到需求。

真好,真好。

css之文本两端对齐的两种解决方法的更多相关文章

  1. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  2. IOS-43-导航栏标题navigationItem.title不能改变颜色的两种解决方法

    IOS-43-导航栏标题navigationItem.title不能改变颜色的两种解决方法 IOS-43-导航栏标题navigationItem.title不能改变颜色的两种解决方法 两种方法只是形式 ...

  3. win7系统不能用telnet命令的两种解决方法

    电脑专业人员对telnet命令都不陌生了,Telnet当成一种通信协议,在日常工作中,经常面对网络问题的人都会用到telnet命令,因为简单有效,可以帮助更快的找出问题.要是在使用过程中碰到win7纯 ...

  4. JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...

  5. 64位win10系统无法安装.Net framework3.5的两种解决方法

    参考网站: https://blog.csdn.net/zang141588761/article/details/52177290 在Windows10中,当我们安装某些软件的时候会提示“你的电脑上 ...

  6. 64位win10系统无法安装.Net framework3.5的两种解决方法【转】

    近日有网友反映在windows10_64位系统电脑上安装Net framework3.5,操作时总失败,怎么办呢?小编下面就介绍win10 64位系统无法安装Net framework3.5的两种解决 ...

  7. 电脑出现kernelbase.dll错误的两种解决方法

    KernelBase.dll是Windows操作系统的重要文件,它为各种应用程序提供服务.如果电脑提示kernelbase.dll错误,这该怎么处理?大家可以用电脑自带的防火墙或者是第三方软件来进行故 ...

  8. css之文本两端对齐

    在进行网页设计时,我们经常会看到这样的样式:文本两端对齐. css为我们提供了一个属性可以实现这样的效果:text-align: justify.不过这个只能用来设置多行文本(除最后一行).如果只有单 ...

  9. css:图标与文字对齐的两种方法

    (好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...

随机推荐

  1. PHP 输出XML字符串

    <?php echo htmlentities( $xml_string);?>

  2. WinDbg命令系统

    WinDbg命令系统 WinDbug三种命令 WinDbug是一个强大的调试器,大部分很多功能都是通过命令来实现的,命令在命令窗口中输入,主要分为以下三类: 标准命令 标准命令提供了调试器的基本功能, ...

  3. [翻译]——MySQL 8.0 Histograms

    前言: 本文是对这篇博客MySQL 8.0 Histograms的翻译,翻译如有不当的地方,敬请谅解,请尊重原创和翻译劳动成果,转载的时候请注明出处.谢谢! 英文原文地址:https://lefred ...

  4. MVC5用户控件

    1. 添加一个model,用于给用户控件传递数据: 2.添加一个部分视图 . 3. 部分视图中,引入model,用于传递数据 4. 在要插入用户控件的地方,这样写 @Html.Partial(&quo ...

  5. [考试反思]1024csp-s模拟测试85:以为

    愈发垃圾. T1基本全场切(除了RP<-inf的zkt和把人擦) 然后T2想了半天逐渐趋近于正解,但是因为数据有问题锅了25分,没什么好说的.T3连题意转化都没有完成.括号匹配转为+1/-1做法 ...

  6. CSPS_105

    不想多说... T1 是$1$还是$26^n-1$ T2 是$f[getf(u)]=getf(v)$还是$f[u]=v$ T3 是$if(condition1\&\&condition ...

  7. hadoop2.6集群环境搭建

    版权声明:本文为博主原创文章,未经博主允许不得转载. 一.环境说明 1.机器:一台物理机 和一台虚拟机 2.Linux版本:[Spark@S1PA11 ~]$ cat /etc/issueRed Ha ...

  8. 路由传参 query 和 params

    vue路由传参分为两种情况: 一.query和params传参的区别: 1.query传参显示参数,params传参不显示参数,params相对于query来说较安全一点. 2.取值方法也有不同:qu ...

  9. 小白学 Python(19):基础异常处理

    人生苦短,我选Python 前文传送门 小白学 Python(1):开篇 小白学 Python(2):基础数据类型(上) 小白学 Python(3):基础数据类型(下) 小白学 Python(4):变 ...

  10. linux 安装swoole扩展方法

    linux 安装swoole扩展方法 wget https://github.com/swoole/swoole-src/archive/v1.9.23.tar.gz接下去就不说了 说明下 下载swo ...