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)
blank

相关推荐

  • ps抠公章的最简单方法_PS抠图公章被判刑

    ps抠公章的最简单方法_PS抠图公章被判刑搞设计的很苦逼,整天面对各种各样任务,除了修图、排版外,还时不时会有些另类需求。这时如果掌握一些小技巧就不用临时抱佛脚啦。下面献上一计:教大家怎么用PS抠公章。有需要的拿去,PS:不要干坏事吆!效

  • c++多态的案例分析

    c++多态的案例分析

    2021年12月15日
  • Server.MapPath详解「建议收藏」

    Server.MapPath详解「建议收藏」语法:Server.Mappath(path)                          //path为你要指定的路径用途:将path指定的虚拟路径转化为实际路径,参数path必须为虚拟路径,否则将出错!范例:1)Server.Mappth(“page.aspx”)      //找出页面page.aspx的实际路径2)Server.Mappth(“/”)     

  • Pytest(13)命令行参数–tb的使用「建议收藏」

    Pytest(13)命令行参数–tb的使用「建议收藏」前言pytest使用命令行执行用例的时候,有些用例执行失败的时候,屏幕上会出现一大堆的报错内容,不方便快速查看是哪些用例失败。–tb=style参数可以设置报错的时候回溯打印内容,可以设置参

  • Spring Boot实战第七章-Spring Boot Web开发-Web相关配置

    Spring Boot实战第七章-Spring Boot Web开发-Web相关配置

  • JetBrains Fleet 初体验

    JetBrains Fleet 初体验几天前获得了fleet的体验资格。长话短说,今天就来和你一起看看现在的fleet都有啥先看名字–fleet什么是fleet?n.舰队;捕鱼船队;(一国的)全部军舰,海军看来,JetBrains是想让”OneIDEtocodeitall.”的口号落实,真正的实现一人成军。配合它自带的Distributedmode,前端后端统一管理。或许真正的Monorepo就会来临?再看图标铁灰色底座配合缺了两个缺口和天空蓝淡紫渐变的圆球主体,我猜它…抱歉我看不懂,于是我当场质问了JetBra.

发表回复

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

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