CSS实现文字两端对齐

CSS实现文字两端对齐最近的项目遇到了这样的需求:(要求标题部分不管文字多少,都必须两端对齐)如下图:当时也没有多想直接使用‘ ’进行代替,毕竟产品同学想快一点看到效果,不敢怠慢!不过到第二个页面就傻

大家好,又见面了,我是你们的朋友全栈君。

最近的项目遇到了这样的需求:(要求标题部分不管文字多少,都必须两端对齐)

 

如下图:

<span role="heading" aria-level="2">CSS实现文字两端对齐

当时也没有多想直接使用‘&ensp;’进行代替,毕竟产品同学想快一点看到效果,不敢怠慢!不过到第二个页面就傻眼了。

 

如图:

<span role="heading" aria-level="2">CSS实现文字两端对齐

这很明显‘&ensp;’已经无法满足我了,只好上&emsp;

这里简单说下几种空格的区别:

 

   &nbsp; 半角的不断行的空白格

   &ensp; 半角的空格

   &emsp; 全角的空格

 

页面效果倒是有了,但是后面复盘的时候发现这样的写法一是不灵活(虽然这里是固定内容),二是不够语义化。所以自然想通过css的方式来解决,在text-align中我们可能用到最多的是center属性,还有一个属性是justify(两端对齐),不过页面刷新后并没有(luan)用。其实这里的text-align:justify是可以单独使用的,前提是文本需要超过两行,并且最后一行不会两端对齐。

因此我们需要借助一个空标签span。

html:

 <div>职务:<span></span></div>  

css:

div{
  width:200px;
  text-align: justify;
}
div span{
  display:inline-block;
  width:100%;
}

这里最完美的做法是使用::after伪元素代替空标签。

 

PS:后面查阅资料发现text-align-last: justify;可以实现最后一行两端对齐,但似乎兼容性很差(Safari不支持)

<span role="heading" aria-level="2">CSS实现文字两端对齐

CANIUSE

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155662.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 163邮箱链接服务器失败是怎么回事,outlook邮箱添加163邮箱账户失败该怎么办?…

    163邮箱链接服务器失败是怎么回事,outlook邮箱添加163邮箱账户失败该怎么办?…在outlook中增加163邮箱账号,添加完成邮箱账号后,然后测试账号设置,测试结果显示:登录到邮件接收服务器(POP3)已失败,发送测试电子邮件消息已失败,查看outlooku错误信息:登录到接收邮件服务器(POP3):您的电子邮件服务器拒绝您使用安全密码验证(SPA)登录。请验证您的帐户属性。在“工具”菜单下,单击“电子邮件帐户”。发送测试电子邮件消息:无法发送此邮件。请在帐户属性中验证电…

  • js中的三目运算符详解

    判断javascript中的三目运算符用作判断时,基本语法为:expression?sentence1:sentence2当expression的值为真时执行sentence1,否则执行sentence2,请看代码varb=1,c=1a=2;a&gt;=2?b++:b–;b…

  • php统计近一周和近30天的用户数据

    php统计近一周和近30天的用户数据

    2021年10月25日
  • Asp.net页面跳转的方法

    Asp.net页面跳转的方法Asp.net几种页面跳转的方法在asp.net下,经常需要页面的跳转,下面是具体的几种方法。跳转页面是大部编辑语言中都会有的,正面我们来分别介绍一下关于.net中response.redirectsever.executeserver.transfer三种页面跳转的方法①response.redirect(慢!但全能!)这个跳转页面的方法跳转的速度不快,因为它要走2个来回(2次postback),但他可以跳转到任何页面,没有站点页面限制(即可以由雅虎跳到新浪),同时不

  • heap和stack的区别

    heap和stack的区别heap和stack的区别

    2022年10月28日
  • 桌面窗口管理器占用过高解决办法

    桌面窗口管理器占用过高解决办法在任务管理器中,您会看到桌面窗口管理器(Windows7上的DWM.exe或以前的Windows版本)的COU使用率很高。此线程将删除您在Win10系统上关于此CPU问题的所有混淆。什么是Win10系统上的桌面窗口管理器(DWM.exe)?桌面窗口管理器是控制Win10系统各种功能的管理器,例如视觉效果,玻璃窗框和3DWindows过渡动画。通常,桌面窗口管理器在后台运行,CPU或内存使用率很低。但是为了使动画更流畅,DWM.exe必须使用某种硬件加速,这需要CPU在Win10系统上运行

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号