CSS技巧之'text-justify'

xiaolinbang 发布于2019-08-29 18:39 / 1481人阅读

摘要：中当属性被赋值为时属性经常被用来和属性一起设置文本两端对齐的方式。

CSS中,当text-align属性被赋值为justify时,text-justify属性经常被用来和text-align属性一起设置文本两端对齐的方式。

p {
  text-align: justify;
  text-justify: inter-word;
}

Values

inter-word: 表示当前文本是通过调整单词(word)之间的间隔来实现两端对齐的,实际上是增加了多余的单词间距.这个属性值其实是word-spacing 属性的变形.

inter-character:
表示当前文本是通过调整字符(character)之间的间隔来实现两端对齐的,实际上是增加了多余的字符间距.这个属性值其实是letter-spacing 属性的变形.

auto: 允许浏览器从inter-word 和inter-character中挑选合适的值作为两端对齐的对齐方式.多语言情景下,文本渲染之前无法得知这是哪一国的语言.这个时候,(auto)就会允许浏览器用户代理来根据当前文本的语言来选择适合的两端对齐方式.

none: 禁用两端对齐规则,也就是移除任何可能通过(样式)层叠生效的两端对齐方式的设置或者重写.

到底什么是两端对齐?

两端对齐文本是一个很富有想象力的说法,它用来描述文本是如何填充满包含它的父容器的方式.实际上,你可以已经很熟悉两端对齐的文本了,但是你却不认识它.如果你曾经使用过文本编辑软件,比如Word和Google Docs的话,你就可能非常熟悉下面的这些图标了(icons):

前面三个是用来设置文本对齐的,就好像CSS的text-align属性, 可以设置文本左对齐、右对齐、和居中对齐.

第四个icon就是两端对齐选项.它让文本内容填充满文档的整个宽度,不管有没有影响到单词间距,每一行文字都会紧靠边界右对齐.

Google Docs中的两端对齐文本每一行都会扩大单词间距来占据整篇文档的宽度.

text-justify 属性允许我们实现同样的效果,但是它可以灵活变通来决定是通过单词(words)间距还是字符(characters)间距来调整文本两端对齐方式.

浏览器兼容性

text-justify 属性已经被收入了CSS Text Module Level 3 文档。

由于可能会在候选推荐期间就被废弃掉,当前text-justify属性已经被列为"at risk"(危险)级别.在不远的将来,它不太可能被纳入各浏览器通用标准,因此并不建议在项目生产中使用这个属性.

当前完全支持它的只有Firefox 55+. Internet Explorer 11 和 Edge 14+也支持此属性,但是只有inter-word值有效,而且因为是非正式的属性值,W3C规范也未收录它.

浏览器支持数据来自 Caniuse, 点击浏览更多. 有数据表明浏览器版本支持该特性.

云服务器 GPU云服务器 attr&039&039checked&039&039 given&039&039 php游戏代码&039&039 java好学吗&039&039

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

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

如何把css&#039;content的操作跟价值发挥到最大

摘要：属性需要与及伪元素配合使用，作用是可以定义伪元素所显示的内容，本文主要列举的可选值及实用的案例与技巧 showImg(https://segmentfault.com/img/bVbwuVr?w=900&h=383); content属性需要与before及after伪元素配合使用，作用是可以定义伪元素所显示的内容，本文主要列举content的可选值及实用的案例与技巧

jindong 2019-08-30 15:56 评论0 收藏0
如何把css&#039;content的操作跟价值发挥到最大

摘要：属性需要与及伪元素配合使用，作用是可以定义伪元素所显示的内容，本文主要列举的可选值及实用的案例与技巧 showImg(https://segmentfault.com/img/bVbwuVr?w=900&h=383); content属性需要与before及after伪元素配合使用，作用是可以定义伪元素所显示的内容，本文主要列举content的可选值及实用的案例与技巧

sixleaves 2019-08-30 15:44 评论0 收藏0
( 第二篇 )仿写&#039;Vue生态&#039;系列___&#039;模板小故事.&#039;

摘要：第二篇仿写生态系列模板小故事本次任务承上完成第一篇未完成的热更新配置核心完成模板解析模块的相关编写很多文章对模板的解析阐述的都太浅了本次我们一起来深入讨论一下尽可能多的识别用户的语句启下在结构上为双向绑定等模块的编写打基础最终效果图一模板页 ( 第二篇 )仿写Vue生态系列___模板小故事. 本次任务承上: 完成第一篇未完成的热更新配置. 核心: 完成模板解析模块的相关编写, ...

wangtdgoodluck 2019-08-26 14:06 评论0 收藏0
( 第二篇 )仿写&#039;Vue生态&#039;系列___&#039;模板小故事.&#039;

摘要：第二篇仿写生态系列模板小故事本次任务承上完成第一篇未完成的热更新配置核心完成模板解析模块的相关编写很多文章对模板的解析阐述的都太浅了本次我们一起来深入讨论一下尽可能多的识别用户的语句启下在结构上为双向绑定等模块的编写打基础最终效果图一模板页 ( 第二篇 )仿写Vue生态系列___模板小故事. 本次任务承上: 完成第一篇未完成的热更新配置. 核心: 完成模板解析模块的相关编写, ...

ivydom 2019-08-30 15:44 评论0 收藏0